如何在React-Leaflet中遍历GeoJSON数组动态绘制多边形

我正在开发一个项目，支持用户绘制多边形并将数据保存至SQL Server，后续从SQL加载数据在Leaflet页面展示。目前已完成数据的保存与加载，相关代码如下：

const MapGeoInfo = () => {
    const [geoJsonData, setGeojsonData] = useState<any>([]);
    const [geoJsonKey, addToGeoJsonKey] = useState(1)

    useEffect(() => {
        const fetchData = async () => {
            const resp: any = await getGeoFenceMaster();
            const geoData = [];

            if (resp?.length > 0) {
                for (var i = 0; i < resp.length; i++) {
                    geoData.push([resp[i]['lng'], resp[i]['lat']]);
                }
            }

            var data = resp,
                hash = Object.create(null),
                result = data.reduce(function (r: any, a: any) {
                    if (!hash[a.type]) {
                        hash[a.type] = { type: a.type, data: [] };
                        r.push(hash[a.type]);
                    }
                    hash[a.type].data.push({ lat: a.lat, lng: a.lng });
                    return r;
            }, []);

            setTestval(data);
            setGeojsonData(geoData);
            addToGeoJsonKey(geoJsonKey + 1);
        };
        fetchData();
    }, []);
    
    return (
        <GeoJSON
            key={geoJsonKey}
            data={{
                "type": "Polygon",
                "coordinates": [geoJsonData],
            }}
            style={{ color: "#1FFFF9", weight: 4, opacity: 5 }}
        >
        </GeoJSON>
    )
};

export default MapGeoInfo;

最初我将所有坐标存入geoData数组，但发现无法区分不同多边形，导致GeoJSON展示时图形混乱：

于是尝试通过type字段（多边形名称）对数据分组，得到如下结构的hash数据：

目前确认该数据格式可行，但不知道如何遍历分组后的数据渲染多个GeoJSON组件。我是React和Leaflet新手，研究一周仍未找到方案，考虑用map()但不确定实现方式。

补充：接口返回的resp数据包含type、name、lat、lng字段，需按type区分多边形，示例如下：

1: {type: 'A', name: 'A1', lat: 32.99253926199695, lng: -84.09759521484376}
2: {type: 'A', name: 'A1', lat: 32.99253926199695, lng: -83.00445556640625}
...（剩余数据略）

内容的提问来源于stack exchange，提问作者RunningKanguru