The clustering is abrupt, with first landing on the new tab with the copied url it does not work but works with refresh and zoom in and out

Question

import MarkerClusterer from "@google/markerclusterer";

  const [markerClusterer1, setMarkerClusterer1] = useState<MarkerClusterer>();

  const handleApiLoaded = ({ map, maps }: Mapprops) => {
    mapRef.current = { map, maps };
    createMarker(mapRef.current);
  };

  const createMarker = ({ map, maps }: Mapprops) => {
    if (markerClusterer1) {
      markerClusterer1.clearMarkers();
    }
    const markers = fakedata.map(data => {
      const [lat, lng] = data.coords.coordinates;
      const marker = { lat, lng };
      return new maps.Marker({ position: marker });
    });
    const markerClusterer2 = new MarkerClusterer(map, markers, {
      imagePath: "img/m",
      gridSize: 0,
    });
    setMarkerClusterer1(markerClusterer2);
  };

  useEffect(() => {
    if (mapRef.current) {
       createMarker(mapRef.current);
      }
    }
  }, [mapRef]);

   interface Mapprops {
      map: google.maps.Map;
      maps: {
        Marker: new () => google.maps.Marker;
      };

the clustering is abrupt, with first landing on the page it does not work but works with refresh and zoom in and out. Any help is highly appreciated.

onGoogleApiLoaded= called handleApiLoaded method providing it the map props.