Convention how to write conditional classes in React

I have a problem I encounter rather frequently when writing React components and now it is so bad that I decided to ask if I missed a convention how to tackle this.
I have an array of items to render with the map method. And I have a bunch of states set when items were clicked or hovered. I want the classes of the rendered items to take this into account. In my current Component I want to render SVG groups with circles that are clickable and have the following classes:

  1. all cases, no circle clicked: spotgroup
  2. circle hovered: spotgroup hover
  3. circle clicked: spotgroup active
  4. another circle clicked: spotgroup inactive

This snippet does what I want it to, but it looks like really bad practice:

className={'spotgroup' + 
  `${ ? ' hover' : ''}` +
  `${activeDestination === ? ' active' : ''}` +
  `${activeSection && activeSpot! && activeDestination !== item.route.stop_id ? ' inactive' : ''}`}

Does anyone know how to handle this in a more elegant way?