React-leaflet - add/remove style to CircleMarker on click - react-leaflet

Question

I am working with react-leaflet to show some data points as circles on a map. I am trying to add a click function to <CircleMarker> so when a circle is clicked, it will add a className "active" and when another circle is clicked, it will remove the "active" class from the previously clicked circle and add the "active" class to the newly clicked circle.
I have a handleClick function that gets the clicked element and setState on the "selected" property with that element. I thought I could just do something like className={ selected.id === data.id ? "active" : "inactive" } for each <CircleMarker>, but it is not switching to the "active" class but stays "inactive" on every click. I checked my css and "active" class works, and the click function is properly firing. Please help!! Here is the simplified version of my code:
class MapComponent extends Component {
constructor(props){
super(props)
this.state = {
selected: {}
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(data, e) {
this.setState({ selected: data })
}
render(){
const { myData } = this.props;
const { selected } = this.state;
return (
<div>
<Map center="xxxxx" zoom=11>
<TileLayer url="xxxxx" attribution="xxxxx" />
{
myData && myData.values.map(data => {
return (
<CircleMarker
className={ selected.id === data.id ? "active" : "inactive" }
key={ data.id }
center={ new L.latLng(data.latitude, data.longitude) }
radius=10
color="red"
value={ data.id }
onClick={ (e) => this.handleCircleClick(data, e) }
>
</CircleMarker>
)
})
}
</Map>
</div>
)
}
}

Answer 1

I finally figured out. It's not so pretty, but I had to manipulate the DOMTokenList manually inside my handleClick() method, using something like event.target._path.classList.replace():
handleClick(data, e) {
this.setState({ selected: data })
if(e.target._path.classList.contains("inactive")){
e.target._path.classList.replace("inactive", "active")
$(event.target).siblings().removeClass("active")
$(event.target).siblings().addClass("inactive")
}
}
I still don't know why I can't just change the className by doing className={ selected.id === data.id ? "active" : "inactive" } on the react-leaflet's <CircleMarker> component though.