Leafletにてマーカーをグループ化するとbindPopupが同一の内容になってしまう

Question

前提・実現したいこと

Leafletで複数マーカー付きの地図を作っています。

WP REST APIで生成したGeoJsonをfetchで読み込み、
複数のマーカーを表示させ、クリックするとポップアップが表示される仕組みにしたいです。
初期表示の座標はsetviewで指定するのではなく、map.fitBounds(iconGroup.getBounds())で自動的にマーカーが設定されている範囲の真ん中にしています。

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

自動的にマーカーが設定されている範囲の真ん中にするために、L.featureGroup()でグループ化していますが、下記、javascriptのソースコードの通り、

return iconGroup.addLayer(L.marker(latlng, {
icon: iconChange
}).bindPopup(feature.properties.popup));

で指定したら取得した配列の一番最後のものしか出力されてしまいます。

下記、geojsonを例にするとすべてが北海道と表示されてしまいます。

該当のソースコード

<div id="mapid"></div>

	window.onload = function () {
	  var map = L.map('mapid');
	  var url = {geojson_url};
	  L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	    maxZoom: 18,
	    attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	  }).addTo(map);
	  fetch(url).then((response) => {
	    return response.json();
	  }).then((data) => {
	    iconGroup = L.featureGroup();
	    data.forEach((datum) => {
	      L.geoJson(datum, {
	        pointToLayer: (feature, latlng) => {
	          var iconChange = L.icon({
	            iconUrl: 'src/' + feature.properties.iconName + '.png',
	            iconRetinaUrl: 'src/' + feature.properties.iconName2x + '.png',
	            iconSize: [25, 41]
	          });
	          return iconGroup.addLayer(L.marker(latlng, {
	            icon: iconChange
	          }).bindPopup(feature.properties.popup));
	        },
	        onEachFeature: (feature, layer) => {
	          layer.bindPopup(feature.properties.popup);
	        },
	      }).addTo(map)
	    });
	    iconGroup.addTo(map);
	    map.fitBounds(iconGroup.getBounds());
	  }).catch(() => {
	    document.getElementById('mapid').innerHTML = 'データを読み込めませんでした。';
	  });
	}

[
	{
		"type": "FeatureCollection",
		"features": [
			{
				"type": "Feature",
				"properties": {
					"popup": "東京",
					"iconName": "marker-icon1",
					"iconName2x": "marker-icon1-2x",
					"id": tokyo
				},
				"geometry": {
					"type": "Point",
					"coordinates": [
						"139.6007816",
						"35.6681625"
					]
				}
			}
		]
	},
	{
		"type": "FeatureCollection",
		"features": [
			{
				"type": "Feature",
				"properties": {
					"popup": "北海道",
					"iconName": "marker-icon1",
					"iconName2x": "marker-icon1-2x",
					"id": hokkaido
				},
				"geometry": {
					"type": "Point",
					"coordinates": [
						"140.3324856",
						"43.4171273"
					]
				}
			}
		]
	}
]

試したこと

onEachFeatureを消すと一応は理想的な形になりますが
新たな問題が発生します。
その問題とは、マーカーをクリックするとポップアップの表示が
クリックしてから一瞬は出現するけどすぐ消えてしまうみたいな形です。

解決策について、よければ、ご教授いただけたら幸いです。

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

Leaflet 1.7.1

参考サイト

https://leafletjs.com/reference-1.7.1.html
https://www.achiachi.net/blog/leaflet/autocenter

追記です。
＃＃＃試したことに記載がありました、
「その問題とは、マーカーをクリックするとポップアップの表示が
クリックしてから一瞬は出現するけどすぐ消えてしまうみたいな形で」
ですが、これはスマートフォンのブラウザで発生しました。
PCでは問題ないです。
こちらで確認したデバイスやブラウザは、
iOS14.7.1のsafari　　14.1.2、Chrome　94.04606.52
となります。

Answer 1

一応は解決しました。

今回の問題は、
上記に提示したjavascriptのソースコード内にonEachFeatureの表記を消すことで解消されますが、
マーカーに対してクリックが反応しにくいという新たな問題がありました。
これはマーカーのクリック範囲が狭くなっており、マーカー画像の上のほうをクリックすると通常通り、反応し、ポップアップが表示されます。
デバイスとか関係なく、もともとそうなっていたようで・・・。

これを解消するために少し無理やりな感じもしますが、CSSで、
.leaflet-popup-tip-containerに対して、
pointer-events: none;となっていたところを、
pointer-events: auto；にすることにしたら解消しました。