Map is not loaded correctly

[hoangviet1112]

Please provide an explanation of the issue

I have this component but the map is not loaded correctly, can someone help to figure out what is happened?

import { useCallback, useMemo, useRef } from 'react';
import {
  GoogleMap,
  Marker,
  MarkerClusterer,
  useJsApiLoader,
} from '@react-google-maps/api';

export function NewMapBox() {
  const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
  ];

  const center = useMemo<google.maps.LatLngLiteral>(
    () => ({ lat: 53.5, lng: -5 }),
    [],
  );

  const mapRef = useRef<google.maps.Map>();
  const onLoad = useCallback((map: any) => (mapRef.current = map), []);
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: config.GOOGLE_MAPS_API_KEY,
    id: 'google-map-script',
  });

  return (
    <div className="h-full rounded-lg border-[1px] border-gray">
      {isLoaded && (
        <GoogleMap
          center={center}
          mapContainerClassName="v-full h-[calc(100%-30px)]"
          mapTypeId="satellite"
          onLoad={onLoad}
        >
          {locations.length && (
            <MarkerClusterer>
              {clusterer => {
                clusterer.clearMarkers();
                return (
                  <>
                    {locations.map(location => (
                      <Marker
                        clusterer={clusterer}
                        key={`${location.lat} ${location.lng}`}
                        noClustererRedraw={true}
                        position={{
                          lat: location.lat,
                          lng: location.lng,
                        }}
                      />
                    ))}
                  </>
                );
              }}
            </MarkerClusterer>
          )}
        </GoogleMap>
      )}
    </div>
  );
}

Your Environment

os: mac/windows

node --version 17

react version 18

webpack version

@babel version

@react-google-maps/api version ^2.19.3

How does it behave?

How should it behave correctly?

Basic implementation of incorrect behavior in codesandbox.com

Here is the result of this component