Prevent React child component from re-rendering multiples time

Question

I have a feature need to implement that is when I'm on the map, I can click in any map position(coordinate) to get the data (data can be many or single) that the position contains. If data is many, it will display a list of items to choose from and see the details, otherwise is a single item.

In case data is many, After I click on the view button to see the item details I want to switch to another position. The weird behavior here is that from the state of details, React didn't render directly to the new position's data, it jumps back to the firstly rendered state then renders the data based on the new position. I want it not rendered back to the list state again, instead renders directly to the new position's data.

How do I achieve that?

Here is the full source code for this sample: https://codesandbox.io/s/crazy-wilbur-rgqrb?file=/src/Map.js