Fast feature replacement causing desynchronisation

Nobody has claimed this yet.

**mapbox-gl-js version**: 2.8.2 (seen on previous ones too)

**browser**: Google Chrome Version 102.0.5005.61 (Official Build) (x86_64)

### Steps to Trigger Behaviour

1. Replace icon features on the map very rapidly (I think that the more the icon weight, the easier it is to reproduce)

### Link to Demonstration
https://codepen.io/sienki-jenki/pen/xxYzGGM

I'm replacing features every 4ms (can be lower or higher, it's just to stress test mapbox) in interval with 200 new features, 1000 times. At the very last time, so at the 1000 time I'm setting 200 features but right after I set only 199 features.

### Expected Behaviour

One of the 200 icons should disappear and only 199 should be shown.

### Actual Behaviour

200 icons stay rendered, zooming in or out will make this "ghost" icon (top right icon) disappear, but it will come back if we zoom in to the initial state where this icon was rendered. After few seconds icon will disappear.
```
map.queryRenderedFeatures().filter(x => x.source === sourceID);
```
`queryRenderedFeatures` returns 200 features, after few seconds map gets updated internally and returns 199 features, even though new data wasn't set

Let me know if maybe my approach to replacing features is wrong or at least how could I avoid having this issue with ghost icon when I'm replacing features very rapidly. 🙏

Start by reproducing the linked CodePen case in Chrome, focusing on rapid replacement of 200 features and the queryRenderedFeatures result for the source. Trace the update and rendering behavior involved in that reproduction; done means replacing 200 features with 199 reliably leaves 199 rendered features without a ghost icon.

Written by the indexing model from the issue text.