title: Ternary operator not working as desired on state change
body: <p>I'm trying to build a map that will show whisky distilleries as icons on the map. When one of the distillery markers is clicked, the state is updated to hold an object with that distillery data so a popup can render with relevant info. I've got a hover effect that I want to persist after clicking for as long as the state holds the obj.</p>
  <p>I have the following ternary operator that should add 'clicked' when selectedDistillery is truthy, but the class is not applied.
  <code>className={`marker-btn ${selectedDistillery ? 'clicked' : ''}`} </code></p>
  <p>The popup renders fine on click so not really sure what the issue is.</p>
  <p>Here's the entire component</p>
  <pre><code>import 'mapbox-gl/dist/mapbox-gl.css'; 
  import './App.css';
  import React, { useState, useEffect } from 'react'
  import ReactMapGl, { Marker, Popup } from &quot;react-map-gl&quot;;
  import * as distilleries from &quot;./data/dist-locations.json&quot;;
  
  
  
  const App = () =&gt; {
    const [viewport, setViewport] = useState({
      latitude: 56.770720743612365,
      longitude: -4.2724397531559655,
      width: &quot;90vw&quot;,
      height: &quot;90vh&quot;,
      zoom: 6,
    });
  
  
    const [selectedDistillery, setSelectedDistillery] = useState(null);
  
    useEffect(() =&gt; {
      const listener = (e) =&gt; {
       if(e.key === 'Escape'){
         setSelectedDistillery(null);
       } 
      }
      window.addEventListener('keydown', listener);
      return () =&gt; {
        window.removeEventListener('keydown', listener);
      }
    }, [])
  
    console.log(selectedDistillery);
  
    return (
      &lt;div className=&quot;main-container&quot;&gt;
        &lt;div className=&quot;map-container&quot;&gt;
         &lt;ReactMapGl
          {...viewport}
          mapboxApiAccessToken={process.env.REACT_APP_API_KEY}
          onViewportChange={(viewport =&gt; { setViewport(viewport) })}
          mapStyle=&quot;mapbox://styles/vdiad/ckkq0g4201s4r17peswejsg82&quot;
        &gt;
        {distilleries.features.map(distillery =&gt; {
          return(
            &lt;Marker key={distillery.id} latitude={distillery.geometry.coordinates[1]} longitude={distillery.geometry.coordinates[0]} &gt;
            &lt;button
              className={`marker-btn ${selectedDistillery ? 'clicked' : ''}`} 
              onClick={()=&gt;{
                setSelectedDistillery(distillery);
              }}
              &gt;
              &lt;img src=&quot;/barrel1.svg&quot; alt=&quot;whisky barrel img&quot; /&gt;
            &lt;/button&gt;
            &lt;/ Marker&gt;
          )
        })}
        {selectedDistillery &amp;&amp; ( 
          &lt;div className=&quot;popup&quot;&gt;
            &lt;Popup
              latitude={selectedDistillery.geometry.coordinates[1]}
              longitude={selectedDistillery.geometry.coordinates[0]}
              onClose={()=&gt;{setSelectedDistillery(null)}}
  
              &gt;
              &lt;h3&gt;{selectedDistillery.properties.NAME}&lt;/h3&gt;
              &lt;p&gt;Founded in: &lt;/p&gt;
              &lt;p&gt;Region: &lt;/p&gt;
              
              &lt;/ Popup&gt;
            &lt;/div&gt;
        )} 
          &lt;/ReactMapGl&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default App
  </code></pre>