React React-leaflet и MarkerClusterGroup, не могут получить доступ к свойству «useState», ошибка ⇐ Javascript

[Anonymous]

У меня есть более 13300 точек интереса, которые можно показать на карте.
Я создал приложение со стартовым приложением React, React-Leaflet и React-Leaflet-Markercluster
Но у меня возникает ошибка: «Невозможно получить доступ к свойству «useState», диспетчер имеет значение null»
Когда он находится в коде

Код: Выделить всё

import { useState, useEffect } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
import MarkerClusterGroup from 'react-leaflet-markercluster';

// Fix  marker icons
const defaultIcon = L.icon({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});

function App() {
const [pois, setPois] = useState([]);
const [loading, setLoading] = useState(true);

// Exemple datas
useEffect(() => {
const mockData = Array.from({ length: 100 }, (_, i) => ({
id: i,
name: `Point ${i + 1}`,
lat: 48.86 + Math.random() * 0.02,
lng: 2.33 + Math.random() * 0.02
}));
setPois(mockData);
setLoading(false);
}, []);

return (




{pois.map(poi => (

{poi.name}

))}



);
}

export default App;

Итак, как мне решить эту проблему?
Я все еще пытаюсь воссоздать проект с разными версиями, но у меня все та же проблема


Подробнее здесь: https://stackoverflow.com/questions/797 ... estate-err