React Leaflet - Unable to use Canvas Markers with Clustering

I'm trying to use Canvas Marker with Clustering but its throwing an error. The following libs are used:

return (
        <div className={`retailer-mapview ${view === 'Map' ? 'd-block' : 'd-none'}`}>
            <Map
                center={center}
                zoom={12}
                minZoom={12}
                preferCanvas={true}
                zoomControl={false}
                onclick={handleClick}
            >
                <TileLayer
                    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url={`${OSM_URL}/tile/{z}/{x}/{y}.png`}
                />
                <CanvasMarkersLayer>
                    <MarkerClusterGroup chunkedLoading={true}>
                        <Marker position={center} icon={icon}>
                            <Popup>
                                <span>Marker 1</span>
                            </Popup>
                        </Marker>
                        <Marker position={pos1} icon={icon}>
                            <Popup>
                                <span>Marker 2</span>
                                <button type="button" onClick={handleBtnClick}>Click</button>
                            </Popup>
                        </Marker>
                    </MarkerClusterGroup>
                </CanvasMarkersLayer>
            </Map>
        </div>
    );

But it throws the following error: Layer isn't a marker at MarkerClusterGroup (http://localhost:3000/static/js/1.chunk.js:118211:5)

Can you please guide me on this. I need canvas markers to render thousands of markers optimally. But am unable to do so because of this error. Thanks in advance.

React Leaflet - Unable to use Canvas Markers with Clustering

0 Answers