React leaflet - GeoJSON gets hidden on drag

Question

I understand that react-leaflet implements lazyloading/virtualization to render the data in the viewport and that is working fine for me as well.

However, I am facing a strange issue when I drag. I am using GeoJSON along with Polygon component of react-leaflet to render different data (its large). Whenever I drag to some level I see only the Polygon data rendered and not GeoJSON.

Not sure if it is due to Polygon overlapping GeoJSON. Any help would be appreciated.

Demo here:

Here is my code:

...
            // this gets hidden on drag sometimes.
            <GeoJSON
                style={mapStyle}
                key={`key-${Math.random()}`}
                data={sampleDataGeoJSON}
                onEachFeature={onEachCluster}
                interactive={false}
            />

            // this always gets rendered.
            {regionBoundary.length > 0 && (
                <Polygon
                    positions={regionBoundary}
                    pathOptions={{
                        fillColor: orange,
                        fillOpacity: 0.5,
                        color: orange, // stroke color,
                        weight: 3, // stroke weight,
                        dashArray: '2, 10',
                    }}
                    zIndex={800}
                    interactive={false}
                />
            )}
...