`react-map-gl` - Rendering thousands of poylgon on map using Source and Layer components

Question

I have an API endpoint that returns around 10,000 Polygons each polygon is a Feature. I need to display all those polygons in a Map.

If I tweak the API to return all these polygons as a FeatureCollection and send this FeatureCollection as a data prop to Source Component, map does get rendered without any issues. But doing this restrict me from selecting and polygon and add different Layer styles (like: type="line") to that selected polygon.

Thus I need to loop through all the Features and look and send down a Feature as a data prop to Source Component. When I do this, browser crashes.

<MapGL
 ref={mapRef}
 {...mapState}
 {...viewport}
 onViewStateChange={_handleViewport}
 onClick={handleMapClick}
>
{plantLocations.map((pl, index) => (
  <Source key={`${pl.properties.id}-source`} type="geojson" 
     data={pl} 
     key={`${pl.properties.id}-source`}
     id={pl.properties.id}
    >                            // plantLocation is a Feature
    <Layer
      id={`${pl.properties.id}-layer`}
      type="fill"
      paint={{
      'fill-color': 'blue', 
      'fill-opacity': 0.6, 
       }}
    />
    {((selectedPl && selectedPl.id === pl.properties.id) ||
      (hoveredPl && hoveredPl.id === pl.properties.id)) && (
      <Layer
        key={`${pl.properties.id}-selected`}
        id={`${pl.properties.id}-selected-layer`}
        type="line"
        source={pl.properties.id}
        paint={{
          'line-color': '#007A49',
          'line-width': 4,
        }}
       />
     )}
  </Source>
))}
     // NavigationControl
</MapGL>

How can I fix this, So that I am able to click on a Layer and add additional styles and do operation on it?