highlight marker based on an external div

[akenarsari]

My question might be mostly related to React but I'm wondering how to best achieve this using react-map-gl. I want to build a functionality similar to many websites where there is a list of items on the left and a map on the right. When a user hovers over an item then the corresponded marker on the map gets highlighted. Something like this:

I already implemented this by changing the data I'm passing to the Map instance on every mouseenter and mouseleave event. On these events, I update my data and change the prop to my wrapper Map which causes a re-render with the new marker style for the the hovered item. I feel like this is not performant and there should be a better way to achieve this by using refs probably. Any alternatives would highly appreciated.