Mapbox react-gl with onLoad ref

Question

I am trying to do this with react-map-gl but cant seem to get it to work. Here is the documentation for what I am trying to do. Just not sure how to do it with react-map-gl https://github.com/Rylern/InterpolateHeatmapLayer#readme

import MapGL, { Source, Layer } from 'react-map-gl';
const interpolateHeatmapLayer = require('interpolateheatmaplayer');

const map = (window.map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10'
}));
    
map.on('load', () => {
    const layer = interpolateHeatmapLayer.create({
        // parameters here
    });
    map.addLayer(layer);
});

Here is my silly attempt so far:

const testPoints = [{
  lat: 62.470663,
  lon: 6.176846,
  val: 16
},
{
  lat: 48.094903,
  lon: -1.371596,
  val: 20
}];
const onMapLoad = React.useCallback(() => {
    mapRef.current.getMap().on('load', () => {
            const testLayer = interpolateHeatmapLayer.create({
                points: points,
                layerID: "testInterpolate"
            })
            mapRef.current.getMap().addLayer(testLayer)
        });
    }, []);
//It seems like the onMapLoad function never runs
<MapGl ref={mapRef} onLoad={onMapLoad} {...viewport} width="100%" height="100%" initialViewState={{longitude: 10.757933,latitude: 59.91149}} mapstyle="mapbox://styles/mapbox/dark-v9" mapboxApiAccessToken="MY SECRET">
</MapGL>
}

This tells me:

Uncaught TypeError: mapRef.current.on is not a function