React-Leaflet-Heatmap：将 heatmap-leaflet 图层添加到地图

我正在使用 react-leftlet 组件来渲染地图、标记、图层和控件，现在我有一个使用 heatmap-leaflet 库创建的图层，因为我只看到了 vanilla JS 的示例，所以我很难看到如何将其添加到已经创建的地图中。我正在使用 MapContainer 组件的“whenCreated”属性给出的引用，但它并没有真正起作用。

所以这是我的地图组件：

<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 © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' 

                    />

                </LayersControl.BaseLayer>

            </LayersControl> 

</MapContainer>

然后我有了使用热图库创建的图层：

useEffect(()=>{

        var heatmapLayer = new HeatmapOverlay(cfg);

        if (mapRef) {

                mapRef.addLayer(heatmapLayer);

        }

        // console.log(heatmapLayer);

    },[mapRef]);