@react-google-maps/api very slow when load thousand markers & markerClusterer

Question

how to load markers properly? cause when i load thousand markers around 123.xxx from API it's slowing down my browser, all of the markers were loaded successfully but it's really slow on performance.

im using this package : https://www.npmjs.com/package/@react-google-maps/api

here is how i fetch the data using SWR, i made a custom hook :

export default function useMaps(){
const { data } = useSWR( "https://myapi.com/map-data");
let coordinates = [];
const data_spread = data !== undefined && data.message.message;
coordinates.push({
        lat: cekLat(lat_data, lng_data),
        lng: cekLong(lat_data, lng_data),
        data,
   });
 })

 return{
   coordinates
 }

in my map.jsx

export default function Map(){
 const {coordinates} = useMaps();
 return (
           <GoogleMap
              mapContainerStyle={gmap_container}
              zoom={gmap_props.zoom}
              center={gmap_props.center}
              options={gmap_options}
              onLoad={onMapLoad}
              onClick={onMapClick}
            >
              <MarkerClusterer>
                {(clusterer) =>
                  coordinates.map((item,idx) => (
                     <Marker
                          key={idx}
                          clusterer={clusterer}
                          position={{
                            lat: coordinate.lat,
                            lng: coordinate.lng,
                          }}
                          icon={{
                            url: "town.png",
                            scaledSize: new window.google.maps.Size(35, 55),
                            origin: new window.google.maps.Point(0, 0),
                            anchor: new window.google.maps.Point(15, 15),
                          }}
                       >
                  )) 
                }
              </MarkerClusterer>
            </GoogleMap>
 )
}