I'm very new to React, I've been trying some things with Google maps.

In the below example, when I click on a marker the InfoWindow appears, but if I click on another Marker (without closing the InfoWindow), I get a Maximum Maximum call stack size exceeded at Object.keys () error, I cannot work out what's happening.

I've tried debugging, and it seems to be related to the anchor, but I can;t work out how to fix it.

Any help would be appreciated.

import { useCallback, useEffect, useState } from "react";
import { createRoot } from "react-dom/client";

import {
  useMap,
  InfoWindow,
  AdvancedMarkerRef,
} from "@vis.gl/react-google-maps";
import { MarkerClusterer } from "@googlemaps/markerclusterer";

import { ErrorBoundary } from "react-error-boundary";

import { MarkerData } from "./MarkerData";
import MarkerPopupComponent from "./MarkerPopupComponent";
import MarkerContent from "./MarkerContent";

interface Props {
  markers: MarkerData[];
  onRemoveMarker: (id: string) => void; // Callback to remove marker
}

function MarkerClustererComponent({ markers, onRemoveMarker }: Props) {
  const [selectedMarker, setSelectedMarker] = useState<{
    markerRef: AdvancedMarkerRef;
    data: MarkerData;
  } | null>(null);
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    const markerCluster = new MarkerClusterer({ map });

    const markerInstances = markers.map((markerData) => {
      const marker = new google.maps.marker.AdvancedMarkerElement({
        position: { lat: markerData.lat, lng: markerData.lng },
      });

      const container = document.createElement("div");
      const root = createRoot(container); // Create a React root
      root.render(<MarkerContent />);

      marker.content = container;

      marker.addListener("gmp-click", () => {
        console.log("Marker clicked", markerData);
        setSelectedMarker({ markerRef: marker, data: markerData });
      });

      return marker;
    });

    markerCluster.addMarkers(markerInstances);

    return () => {
      markerCluster.clearMarkers();
    };
  }, [map, markers]);

  const handleClose = useCallback(() => {
    setSelectedMarker(null);
  }, []);

  return (
    <>
      {selectedMarker && (
        <ErrorBoundary fallback={<div>Something went wrong</div>}>
          <InfoWindow anchor={selectedMarker.markerRef} onClose={handleClose}>
            <MarkerPopupComponent
              selectedMarker={selectedMarker.data}
              onRemoveMarker={onRemoveMarker}
            />
          </InfoWindow>
        </ErrorBoundary>
      )}
    </>
  );
}

export default MarkerClustererComponent;