Help Optimizing Performance when Clearing all Markers

[sstream17]

I have an application that is clustering markers using the MarkerClusterer component. I am noticing slowdowns when trying to revisualize Markers.
I am able to load small amounts and large amounts of markers just fine after the application has first loaded. But I run into issues when I try to load new markers when 10,000+ or so markers are already rendered. I am trying to replace the already rendered markers with an entirely new set of unrelated markers.

Below is the component I am using to cluster markers. The user has the option to cluster by an event's category or country, that is why the layers are used.

export default function Clusterer() {
  const [events, setEvents] = useState([]);
  const [layers, setLayers] = useState([]);

  const loadEvents = () => {
    // Fetch events from API
    // Triggered by button in parent component
    // const data = await fetch();
    // ...

    setEvents(fetchedEvents);
  };

  useEffect(() => {
    const createLayers = (events) => {
      let eventLayers = new Map();
      const selectedOption = getSelectedOption();

      if (!selectedOption || "none" in selectedOption) {
        eventLayers.set("all", events);
      } else {
        const useCategory = "category" in selectedOption;

        events.forEach((e) => {
          const category = useCategory ? e.category : e.country;
          if (eventLayers.has(category)) {
            eventLayers.get(category).push(e);
          } else {
            eventLayers.set(category, [e]);
          }
        });
      }

      return [...eventLayers.values()];
    };

    setLayers(createLayers(events));
  }, [events]);

  return (
    <div>
      {layers &&
        layers.map((events, index) => {
          return (
            <MarkerClusterer key={index} options={clustererOptions}>
              {(clusterer) =>
                events.map((event) => (
                  <Marker
                    key={event.id}
                    position={{ lat: event.latitude, lng: event.longitude }}
                    clusterer={clusterer}
                  />
                ))
              }
            </MarkerClusterer>
          );
        })}
    </div>
  );
}

What I am seeing is every time I try to fetch new data, the existing Marker components are being removed and it seems to trigger a redraw.

Is there a way to optimize the performance here or even simply remove all markers in an efficient manner?

[TeddySabatierLimpide]

Hello, I have the same issue the most when we remove markers (arround 1800 markers) and th emarker clusterer have a big delay to rerender, more than 30 seconds most of the time. Thanks if anyone has tips!