React unmounting 30k+ components is slow

I have a Map with around 30k+ interactive markers and a number of filters for them. Whenever I select a filter and click apply an API call is made to get the filtered data. Now the problem is the existing 30k+ markers will removed(unmounted) and will be replaced with the new filtered data from the api call. This unmount operation causes the UI to freeze for around 10+ seconds and finally it renders the filtered data. I am unable to even show a spinner when such an operation takes place.

How to optimize mounting and unmounting of such a large data set ?. I've used all rendering optimizations like React.memo() and such but the problem is due to the initial render and removal of such a large data at once.

`<Map
     ref={mapRef}
     center={latlng}
     zoom={14}
     minZoom={12}
     preferCanvas={true}
  >
  <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright" target="_blank" rel="noopener noreferrer">OSM</a>'
      url={`${OSM_URL}/tile/{z}/{x}/{y}.png`}
   />
   <MarkerClusterGroup chunkedLoading={true} chunkInterval={500}>
       <MarkerList markers={mydata} showInfoPopup={showInfoPopup} />
    </MarkerClusterGroup>
</Map>`

Things I've considered:

1. Using display: none rather than unmount. But this won't solve the issue the initial mount and its not possible for the marker components.
2. Offload rendering to a Worker thread. (Don't know if this is possible in React - best way)
3. Use plain old DOM elements rather than React Components but this doesn't feel optimal

Any guidance on how to handle such a large data set is much appreciated.