React React-leaflet and MarkerClusterGroup, can't access property "useState" error

i have more than 13300 points of interests to show on a map. i have created a app with starter react app, react-leaflet and react-leaflet-markercluster

but i have this error "can't access property "useState", dispatcher is null" when is on the code

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 (
        <div style={{ height: '100vh', width: '100%' }}>
            <MapContainer
                center={[48.86, 2.33]}
                zoom={13}
                style={{ height: '100%', width: '100%' }}
            >
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                />
                <MarkerClusterGroup>
                    {pois.map(poi => (
                        <Marker
                            key={poi.id}
                            position={[poi.lat, poi.lng]}
                            icon={defaultIcon}
                        >
                            <Popup>{poi.name}</Popup>
                        </Marker>
                    ))}
                </MarkerClusterGroup>
            </MapContainer>
        </div>
    );
}

export default App;

So how can i solve this issue? I still try to recreate the project, with different versions, but i still have the same problem