React-Leaflet-Heatmap: Adding heatmap-leaftlet layer to map

Question

I'm using react-leftlet component to render the map, markers, layers and controls, and now I have a layer created with the heatmap-leaflet library, and since I only see examples for vanilla JS I'm having trouble seeing how to add it to the already created map. I'm using the reference given by the "whenCreated" attribute of the MapContainer component but it's not really working.

So this is my map component:

<MapContainer
            center={LOCATIONS.Quilicura}
            zoom={4}
            zoomControl={false}
            style={{ height: '100%', width: '100%' }}
            whenCreated={setMapRef}>
            <LayersControl position='bottomleft'>
                <LayersControl.BaseLayer checked name='Standard Streetmap'>
                    <TileLayer
                        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                    // attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
                    />
                </LayersControl.BaseLayer>
                <LayersControl.BaseLayer name='Esri World Imagery'>
                    <TileLayer
                        url='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
                    // attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' 
                    />
                </LayersControl.BaseLayer>
            </LayersControl> 
</MapContainer>

And then I have the layer I create with the heatmap library:

useEffect(()=>{
        var heatmapLayer = new HeatmapOverlay(cfg);
        if (mapRef) {
                mapRef.addLayer(heatmapLayer);
        }
        // console.log(heatmapLayer);
    },[mapRef]);

Answer 1

import {HeatmapLayer} from 'react-leaflet-heatmap-layer-v3'

(make sure you install v3 the older versions don't work past react 16, even this one will make you revert to react 17)

After that is just a matter of using it inside the Map as shown here:

<MapContainer
    center={position && position}
    zoom={7}
    scrollWheelZoom={true}
  >
    <HeatmapLayer
      fitBoundsOnLoad
      fitBoundsOnUpdate
      points={tester}
      longitudeExtractor={(m) => m[1]}
      latitudeExtractor={(m) => m[0]}
      intensityExtractor={(m) => parseFloat(m[2])}
      radius={10}
      max={100}
      minOpacity={1}
      useLocalExtrema={true}
    />
  </MapContainer>