react-google-maps toggle remove Heatmap

Question

I am currently struggeling to work with the heatMapLayer component from the react-google-maps-api.

In the following heatmap component I am passing data that I receive from an api call and the heatmap is created on the map, but I have a toggle option, where I want to show different data and the heatMapTracks would be null or and empty array []. I would expect the heatmaplayer to then disappear or to show new data, but it always shows the old data on the map. Is there a way to remove the heatmap layer?

import { HeatmapLayerF } from '@react-google-maps/api';

interface IHeatMap {
  heatMapTracks: { location: google.maps.LatLng; weight: number }[];
}

export const HeatMap = (props: IHeatMap) => {
  const { heatMapTracks } = props;

  if (heatMapTracks.length === 0) {
    return null;
  }

  return (
    <HeatmapLayerF
      data={heatMapTracks}
      options={{
        radius: 15,
        opacity: 1,
      }}
    />
  );
};

EDIT: I have tried also render the Component conditionally, but nothing works. Some Dummy Data:

  data={[
                    new google.maps.LatLng(37.782551, -122.445368),
                    new google.maps.LatLng(37.782745, -122.444586),
                    new google.maps.LatLng(37.782842, -122.443688),
                    new google.maps.LatLng(37.782919, -122.442815),
                    new google.maps.LatLng(37.782992, -122.442112),
                    new google.maps.LatLng(37.783100, -122.441461)
                ]}

I this is the conditionally check I have tried

 return (
      <>
        {this.data.track.polylineData && filteredElements}
        {this.data.isMobile ? <HeatMap heatMapTracks={heatMapTracks} /> : null}
        {this.data.poiState && poiElements}
        {machine && machineElement()}
      </>

Answer 1

Use HeatmapLayer instead of HeatmapLayerF. I had the same issue, and by doing so, I solved it.