Hover on list items to change map marker styling
While I wouldn't say your code is inefficiently styled, you can definitely improve the performance of your components.

React performs in a tree format, when a component updates, all their children will attempt to update and potentially re-render. This is part of what React calls the Reconciliation process.

There is a function you can add to your component classes called componentShouldUpdate, which comes with parameters (nextProps, nextState). The idea of this function is to decide whether the component needs to re-render.  You can find some more information on this property here.

For example, if you were to hover and change the colour of one of the markers, the entire list of markers rerenders, but, you can make a check to see whether the specific marker is the one you want to color and so needs to be updated.

These kinds of stops on rerendering means as high as possible in your render trees means you can get the most performance gains.

shouldComponentUpdate(nextProps) { // inside MapMarker.js
    const { props } = this;
    return props.hoveredCardId !== nextProps.hoveredCardId
      || nextProps.hoveredCardId !== props.pageid;
}