Mapbox Layer wont update on statechange - mapbox

Question

I am trying to use a custom layer and update it over time but can't seem to get it to work to update when state changes. I am using a library to interpolate I thought the use memo runs but the Layer doesn't get updated. How can I make it so it gets updated?
Codesandbox:https://codesandbox.io/s/elastic-jasper-p8xeme?file=/src/Map.jsx
import React, { useEffect, useState } from "react";
import MapGL, { Layer } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
const interpolateHeatmapLayer = require("interpolateheatmaplayer");
const MapDisplay = () => {
const mapRef = React.useRef();
function handleChange() {
setCount(count + 1);
console.log(count);
}
function generateRandomInteger(min, max) {
return min + Math.random() * (max + 1 - min);
}
const [count, setCount] = useState(0);
function generateRandomPoints() {
const points = [];
for (let i = 0; i < 100; i++) {
const lat = generateRandomInteger(50, 65);
const long = generateRandomInteger(5, 15);
const value = generateRandomInteger(-20, 20);
points.push({ lat: lat, lon: long, val: value });
}
return points;
}
const InterPolateLayer = React.useMemo(() => {
return interpolateHeatmapLayer.create({
points: generateRandomPoints(),
layerID: "InterPolateLayer",
p: 4,
maxValue: 20,
minValue: -20,
roi: [
{
lat: 58.876757827896306,
lon: 11.881643616280888
},
{
lat: 58.82822263473829,
lon: 11.186346643290852
},
{
lat: 57.912686819868505,
lon: 7.476790555439328
},
{
lat: 62.044315808590355,
lon: 4.497823276243542
},
{
lat: 63.90167395134969,
lon: 8.386691071710919
},
{
lat: 65.78132314149487,
lon: 10.969111182413434
},
{
lat: 68.99622052100831,
lon: 12.799815394602154
},
{
lat: 71.32599822634651,
lon: 24.95207832070384
},
{
lat: 63.99473920322428,
lon: 13.975403465948437
},
{
lat: 58.876757827896306,
lon: 11.881643616280888
}
]
});
}, [count]);
//How can I change the Layer on buttonclick?
//I am trying to rerender the InterPolateLayer but dosent seem to work
return (
<>
<MapGL
initialViewState={{
longitude: 10.757933,
latitude: 59.91149
}}
//onViewportChange={setViewport}
style={{ width: "100vw", height: "100vh" }}
/* onLoad={onMapLoad} */
ref={mapRef}
mapStyle="mapbox://styles/mapbox/dark-v9"
mapboxApiAccessToken="pk.eyJ1Ijoib2xlZHliZWRva2tlbiIsImEiOiJja3ljb3ZvMnYwcmdrMm5vZHZtZHpqcWNvIn0.9-uQhH-WQmh-IwrA6gNtUg"
>
<Layer {...InterPolateLayer}></Layer>
<button style={{ position: "absolute" }} onClick={handleChange}>
Only Show 5 points!
</button>
</MapGL>
)
</>
);
};
export default MapDisplay;