How to make MarkClusterer perform better in Google map after a state changed

Question

I have around 500 Markers in my google map and i want to cluster them. I am using the MarkerClusterer component from react-google-map/lib/components/addons/MarkerClusterer and i have manage to cluster them. But when a state change, the number of the Markers are reduced and the MarkerClusterer has performance issues. I have found this on github and i want to integrate this solution with my code, but i did not manage to accomplished it.

My code is like this:

clusterRef: React.createRef()

....

componentDidUpdate() {
  this.clustererRef = React.createRef();
  if (this.props.showActiveDevice) {
    console.log('I am insideee :')
    this.clustererRef.current.clearMarkers()
  }
}
.....
<GoogleMap>
   <MarkerClusterer
       onLoad={clusterer => (this.clusterRef.current = clusterer)}
       styles={[
          {
            textColor: 'white',
            url: `/assets/images/tractor.png`, 
            height: 43,
            width: 43,
          },
       ]}
   >
    {props.markers.devices.filter(marker => {
       if (this.props.showActiveDevice) {
           return marker.online
       } else {
           return true;
    }
    }).map((marker, index) => {
       let analyzerMarkerIcon;
       .........
       return <Marker
         .......
         noClustererRedraw={true}
       </Marker>
      }
    )}
  </MarkerClusterer>
</GoogleMap>

This code gives me that error: TypeError: can't access property "clearMarkers", this.clustererRef.current is null. I see on the documentation that the MarkerClusterer does not take ref attribute. Can anyone help?