Delay in Highlighting Polygon on Click in RNMapbox

[GhulamFaridqau]

I am using rnmapbox in my React Native project. We have a map feature where we use clusters, and clicking on clusters zooms into polygons. The problem is that when I click on a polygon, it gets highlighted, but there is a delay of 2 to 3 seconds before the highlight appears.

Expected Behavior
The polygon should highlight instantly when clicked.

Actual Behavior
There is a delay of 2 to 3 seconds before the polygon gets highlighted after clicking.

Steps to Reproduce
Use clusters on a map.
Click on a cluster to zoom into polygons.
Click on a polygon and observe the delay in highlighting.
Analysis
I believe this delay might be due to how I am updating the source. I think my current method of source updating is the most efficient way, but the delay persists.
Code Snippet
Clicking Functionality used here
{nearbyFieldsData && (mapSettings.mapOverlay.value !== 'ndvi_average' || isFieldHealthVisible) && ( <NearbyBoundaries data={nearbyFieldsData} onPress={onPressPolygonLayer} paintFill={ isFieldHealthVisible || isNdviPixelsVisible || isRgbPixelsVisible ? { 'fill-opacity': 0 } : paintFill } mapLayers={{ source: MAP_LAYERS.NEARBY_FIELD_POLYGONS_SOURCE, fillLayer: MAP_LAYERS.NEARBY_FIELD_FILL, lineLayer: MAP_LAYERS.NEARBY_FIELD_LINE, }} isLightPoint={mapSettings.mapType.value === 'satellite'} /> )}
this functions is called when click on polygon

const onPressPolygonLayer = useCallback((event: OnPressEvent) => { if (event.features) { const feature = event.features[0]; if (feature.id) { setSelectedFieldId(parseInt(feature.id.toString(), 10)); } } }, []);
this useEffect then called as the selected fieldID updated

useEffect(() => { setActiveFieldId(selectedFieldId); setIsFieldDetailVisible(selectedFieldId !== null); }, [selectedFieldId]);

and this useEffect calls as selectedFieldID updated and in this useEffect i am updating the source

useEffect(() => { if (nearbyFieldsData && activeFieldId) { const newNearbyBoundariesPolygons = nearbyFieldsData.polygons.map( (polygon) => ({ ...polygon, properties: { ...polygon.properties, hover: polygon.id === activeFieldId, }, }) ); const newNearbyBoundaries = { ...nearbyFieldsData, polygons: newNearbyBoundariesPolygons, }; if (!isEqual(nearbyFieldsData, newNearbyBoundaries)) { setNearbyFieldsData(newNearbyBoundaries); } } }, [nearbyFieldsData, activeFieldId]);

Remember
No extra rendering i am having in my code. Also i have updated rnmapbox to latest doesnt work.

Environment
React Native version: 0.70.15
RNMapbox version: 10.0.15
Platform: iOS and Android = Both
Device: all testing devices

Any suggestions on how to solve this issue or improve the performance would be greatly appreciated. Has anyone faced a similar problem or has any idea how to resolve this delay?

Thank you!