Mapbox Layer wont update on statechange

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;