I am getting 16000 lat lng from api and trying to plot those points on google map with react first time all points plotting correctly but when filtering from frontend and passing new list to the map during rendering the browser is getting unresponsive what is the solution

this is my filtering logic
` const filterFuelStation = () => {

// Filter fuel stations based on selected types
let filteredStations = [...fuelStations];
filteredStations = filteredStations.filter((fuelStation: any) => {
  if (isAlternateStations && fuelStation.fuelType === "alternate") {
    return true;
  }
  if (isBioFuelStations && fuelStation.fuelType === "bio") {
    return true;
  }
  if (isEvStations && fuelStation.fuelType === "ev") {
    return true;
  }
  return false;
});

here i am passing to the map component
{showFuelMapSkeleton ? (

) : (

<FuelStationMap
center={{ lat: depotLocation.lat, lng: depotLocation.lng }} // Set the initial center of the map
zoom={20} // Set the initial zoom level
fuelStations={fuelStationsForMap}
circleRedius={mapCarzdData?.radiusInKm}
/>

)}
`

I want to solve the browser unresponsive issue it should plot smoothly