react leaflet cluster

[LeilaEb]

hi, have error: 0 , react__WEBPACK_IMPORTED_MODULE_0__.use) is not a function when use MarkerClusterGroup get above error .

react-leaflt v 4.2.1 leaflet v 1.9.4 react-leaflet-cluster v 2.1.0 react v 18

`export default function LocationContainer(props) { const [t] = useTranslation(); const [locations, setLocations] = useState([]); const [recId, setRecId] = useState(); const [recData, setRecData] = useState(); const responseRecord = useGetIORecordById(recId); const locationIcon = L.icon({ iconUrl: location, iconRetinaUrl: location, iconSize: [20, 20], });

useEffect(() => { if (responseRecord) { setRecData(responseRecord); } }, [responseRecord]);

useEffect(() => { if (props.locations) setLocations(props.locations); else setLocations([]); }, [props.locations]);

const createClusterCustomIcon = function (cluster) { return new divIcon({ html: <span class="cluster-icon">${cluster.getChildCount()}</span>, className: "custom-marker-cluster", iconSize: point(33, 33, true), }); };

return ( <Grid> <div style={{ padding: "5px", margin: "5px", }} > <MapContainer scrollWheelZoom={true} bounds={props.markers} style={{ height: "400px", width: "100%", position: "inherit", margin: "0 auto", zIndex: 1, }} dragging={true} placeholder > <TileLayer attribution='Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors' url="https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg" /> <MarkerClusterGroup chunkedLoading iconCreateFunction={createClusterCustomIcon} > {locations !== undefined && locations !== null && locations?.length > 0 && locations.map((item, index) => ( <> <Marker key={index} position={[Number(item?.Latitude), Number(item?.Longitude)]} icon={locationIcon} eventHandlers={{ click: (e) => { setRecId(item.Id); }, }} > <Popup> <div style={{ with: 500 }}> <IoDetailCard data={recData} /> </Popup> </Marker> </> ))} </MarkerClusterGroup> {/* </TileLayer> /} {/ </MarkerClusterGroup> /} {/ <SetBoundsRectangles /> */} </MapContainer> </Grid> ); }`