title: React on and off highlight
body: <p>Happy new year everyone, i have a lists of data that displays in collapse, i just want that to highlight for every click of user in a list but <em><strong>one at a time when highlighting</strong></em></p>
  <p>to understand better, please see this sample</p>
  <p><a href="https://codesandbox.io/s/list-highlight-demo-forked-ww0op" rel="nofollow noreferrer">https://codesandbox.io/s/list-highlight-demo-forked-ww0op</a></p>
  <pre><code>const [highlight, setHighlight] = useState(false)
  const handleClick = () =&gt; {
     if (on) set(null)
     else set(index)
  }
    &lt;Collapse in={viewLocationList} sx={{ my: '2px' }}&gt;
      {!!searchParameter &amp;&amp; (
        &lt;Box className=&quot;rounded-scrollbar widget-result-container&quot;
        onClick={handleClick}
        sx={{
          my: 1,
          bgcolor: on &amp;&amp; &quot;lightgrey&quot;,
          &quot;&amp;:hover&quot;: { bgcolor: on &amp;&amp; &quot;lightgrey&quot; }
        }}
        &gt;
          {filteredLocations.map((location, key, on) =&gt; (
            &lt;LocationWidgetItem
              key={key}
              location={location}
              onClickLocation={setActiveLocation}
              index={key} on={highlight === key} set={setHighlight}
            /&gt;
          ))}
        &lt;/Box&gt;
      )}
    &lt;/Collapse&gt;
  </code></pre>
  <p>this is the error of current code</p>
  <p><a href="https://i.stack.imgur.com/JsBzm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JsBzm.png" alt="enter image description here" /></a></p>