React leaflet V3 - render markers in canvas with custom icons

Question

I am trying to render markers in canvas in React leaflet V3 using leaflet-canvas-marker library. Since this library doesn't support version 3 of React-leaflet I am using the below approaches:

1. The approach mentioned here is successfully rendering 150k markers in canvas. However it doesn't delete the existing markers before plotting the new set of data as I assume the L.canvasIconLayer accepts immutable property for data. So just updating the state is not enough seems. I have tried the following to delete the markers but no luck:

   const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
   const map = useMap();
   map.eachLayer(function (layer) {
       if (tileUrl !== layer._url || layers._markers) {     // these checks aren't enough
           map.removeLayer(layer);                          // deletes markers + some extra layers
       }
   });
   

2. The second approach is to go with CircleMarker instead of Marker which accepts a renderer prop to decide whether to render the markers in Canvas or SVG. This works fine but doesn't support custom icons using L.divIcon or L.icon.

   const myRenderer = L.canvas({ padding: 0.5 });
   const markerComponents = useMemo(() => {
       return markers.map((marker, key) => {
           return isNaN(marker.latitude) || isNaN(marker.longitude) ? null : (
               <CircleMarker
                   key={key}
                   center={[marker.latitude, marker.longitude]}
                   radius={3}
                   renderer={myRenderer}
                   pathOptions={{ color: 'red', fillOpacity: 1 }}
               >
               </CircleMarker>
           );
       });
   }, [markers]);
   
   

Any better approach to render markers in canvas in React-leaflet V3 with custom icons?