Removing a marker from Clusterer when its position changes -- React Google Maps

Question

I am using react-google-maps/api library in my typescript react app. My app allows users to mark their location on the map. When the user sets his/her marker he can change the marker location by clicking on a different location. If the markers are close enough, they are getting clustered.

But here is the problem; Lets say there are two markers and they are clustered. When user changes one of the marker's location and put it far away from the cluster, cluster isn't dispersed and the marker which should be out of the cluster can not be seen on the map because it is still in the cluster. Only if I click the cluster icon and zoom and disperse the cluster then I can see the proper location of my far away marker.

What I want is, if user change the location of a marker which is inside a cluster, we should see its new location on the map and I should remove that marker from the cluster. Because the new marker position doesn't require cluster because of the distance between other markers in the cluster.

My basic setup is like following. If you need more information about my code please let me know.

                <LoadScript language={lang} id="script-loader" googleMapsApiKey="API_KEY" libraries={libraries}>
                <PlacesAutocomplete map={map} setCenter={setCenter} setZoom={setZoom} zoom={zoom} />
                <GoogleMap
                    onLoad={map => {
                        setMap(map);
                    }}
                    clickableIcons={false}
                    options={{
                        streetViewControl: false,
                    }}
                    mapContainerStyle={containerStyle}
                    center={center}
                    zoom={zoom}
                    onZoomChanged={() => handleZoomChanged}
                    onClick={handleAddMarker}
                >
                    <>
                        <OverlayView position={{ lat: -34.397, lng: 150.644 }} mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
                            <MarkerClusterer
                                zoomOnClick={true}
                                averageCenter={true}
                                maxZoom={8}
                            >
                                {clusterer => (
                                    <>
                                        {markers?.map((obj: any, i) => (
                                            <Marker
                                                clickable={false}
                                                clusterer={clusterer}
                                            />
                                        ))}
                                    </>
                                )}
                            </MarkerClusterer>
                        </OverlayView>
                    </>
                </GoogleMap>
            </LoadScript>

Answer 1

After some research I found a solution.

const clustererRef = useRef<any>();
    useEffect(() => {
        clustererRef.current?.repaint();

    }, [markers]);

<MarkerClusterer
      **onLoad={clusterer => (clustererRef.current = clusterer)}**></MarkerClusterer>

With this solution, clusters are repainted everytime the markers state changes. That means all the clusters are rerendered everytime users put new marker or change the position of an existing marker. But I only want to render the cluster whose markers position changes not the others.

Is there anyone who can help?