picture要素とワードプレスのpost_thumbnailに関して

実現したいこと

picture要素でのメディアクエリで、post_thumbnailの画像を表示させたい

前提

htmlのファイル時はできたのですが、
php化すると出来なくなりました。

発生している問題・エラーメッセージ

が表示されない

該当のソースコード

<div class="hero-visual-page"> <picture> <source srcset="<?php if(has_post_thumbnail()): the_post_thumbnail(); endif; ?>" media="(min-width:768px)"> <source srcset="<?php echo esc_url(get_template_directory_uri()); ?>/assets/img/utada.jpg" media="(min-width:500px)"> <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/img/01.jpg" alt="must" width="100%" height="500px"> </picture> </div>

試したこと

一通り試しましたが、下記もダメでした。

<div class="hero-visual-page"> <picture> <?php if(has_post_thumbnail()): ?> <?php the_post_thumbnail(); ?> <?php endif; ?> <source srcset="<?php echo esc_url(get_template_directory_uri()); ?>/assets/img/utada.jpg" media="(min-width:500px)"> <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/img/01.jpg" alt="must" width="100%" height="500px"> </picture> </div>

補足情報（FW/ツールのバージョンなど）

そもそも、source srcsetを使った式には、
the_post_thumbnailは対応できないのかなと。。。
ご存じの方いたらよろしくお願いします。