Wordpressでforeachが連想配列をうまく受け取ってくれていない。

前提・実現したいこと

WordpressのACFにて作ったカスタムフィールド（セレクトボックス）、都道府県（pref）を使い、
各都道府県に属する記事ごとに、一覧表示がしたいと考えております。

【理想例】

■東京都（ここは、コードでいう<h4>）
記事１
記事２

■大阪府
記事３
記事４
記事５

セレクトボックスでは、
tokyo : 東京都
osaka : 大阪府
のようにキーと値を設定しています。

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

現状は、都道府県（pref）の最後の値が取得され、記事もその下に一覧表示されてしまいます。

【現状】

■osaka
記事１
記事２
記事３
記事４
記事５

これは、foreachがうまく回っておらず、値を上書きしていると考えているのですが、どのように書き直せばよいでしょうか？
また、値もうまく表示されておりませんので、そちらの表示の仕方も合わせて教えていただけると幸いです。
数時間かけて解決策を探しましたが、どの書き方を試してもうまくいきませんので、こちらで質問させていただいております。

当方、PHPは手探り状態の素人となります。

該当のソースコード

html
1<?php foreach((array)get_field('pref') as $prefkey　=> $prefvalue) : ?>
2
3<h4>■<?php echo $prefvalue; ?></h4>
4
5<?php while ( have_posts() ) : the_post(); ?>
6
7<ol><li><?php the_title(); ?></li></ol>
8
9<?php endwhile; ?>
10
11<?php  endforeach; ?>