現在のページに属する子ページ、更に子ページに属する孫ページを表示さ

いつもお世話になりありがとうございます。
現在のページに属する子ページ、更に子ページに属する孫ページを表示させたいです。
親ページ用に作ったテンプレートに記述しています。

現在のページに属する子ページは表示できました。

<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>

<div>
<?php $child_posts = new WP_Query(array( 'post_type' => 'page', 'post_parent' => $post->ID ) ); ?>
<?php if( $child_posts->have_posts() ): ?>
<?php while ($child_posts->have_posts()) : $child_posts->the_post(); ?>
<!--　▼子ページ▼　-->

<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

<!--　▲子ページ▲　-->
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
</div>

表示結果は
<h1>現在のページのタイトル<h1>
<div><h2>属する子ページ①のタイトル</h2></div>
<div><h2>属する子ページ②のタイトル</h2></div>
でした。

同じ様に属する子ページの中で孫ページを表示させようとしてみました。

<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>

<div>
<?php $child_posts = new WP_Query(array( 'post_type' => 'page', 'post_parent' => $post->ID ) ); ?>
<?php if( $child_posts->have_posts() ): ?>
<?php while ($child_posts->have_posts()) : $child_posts->the_post(); ?>
<!--　▼子ページ▼　-->

<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

    <div>
    <?php $child_posts = new WP_Query(array( 'post_type' => 'page', 'post_parent' => $post->ID ) ); ?>
    <?php if( $child_posts->have_posts() ): ?>
    <?php while ($child_posts->have_posts()) : $child_posts->the_post(); ?>
    <!--　▼孫ページ▼　-->
    <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    <!--　▲孫ページ▲　-->
    <?php endwhile; wp_reset_postdata(); ?>
    <?php endif; ?>
    </div>

<!–　▲子ページ▲　–>
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
</div>

表示結果は
<h1>現在のページのタイトル<h1>
<div>
<h2>属する子ページ①のタイトル</h2>
<div><h3>更に子ページに属する孫ページ①のタイトル</h3></div>
<div><h3>更に子ページに属する孫ページ②のタイトル</h3></div>
</div>
<div>
<h2>孫ページのタイトル</h2>
</div>
になってしまい、孫ページのタイトルがループされてしまいました。

私が求めている表示結果は
<h1>現在のページのタイトル<h1>
<div>
<h2>属する子ページ①のタイトル</h2>
<div><h3>更に子ページに属する孫ページ①のタイトル</h3></div>
<div><h3>更に子ページに属する孫ページ②のタイトル</h3></div>
</div>
<div>
<h2>属する子ページ②のタイトル</h2>
<div><h3>更に子ページに属する孫ページ①のタイトル</h3></div>
<div><h3>更に子ページに属する孫ページ②のタイトル</h3></div>
</div>
です。
このような表示結果が得られる方法をご伝授頂けますと幸いです。
よろしくお願いします。