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]);