title: how to revert (last clicked list item) back to its original color when any other item is clicked - react hooks
body: <p>I'm trying to implement this feature in react:</p>
  <p><strong>Default state:</strong> All list items are blue;</p>
  <p><strong>If one specific item is clicked:</strong> that same item text color becomes red;</p>
  <p><strong>When any other item is clicked:</strong> that last item text color revert back to blue;</p>
  <p><em>In my code the item text color stays red, even when other items are clicked.</em></p>
  <p>I searched here and it seems that I should use useRef and the item.id but I'm stuck on how to implement this particular feature.</p>
  <p>Thanks</p>
  <p>App.js</p>
  <pre><code>import { useState } from 'react'
  import Item from './components/Item'
  
  function App() {
      const [items, setItems] = useState([
          {
              id: 1,
              name: 'Item 1',
          },
          {
              id: 2,
              name: 'Item 2',
          },
      ])
  
      return (
          &lt;&gt;
              {items.map((item) =&gt; (
                  &lt;Item key={item.id} id={item.id} name={item.name} /&gt;
              ))}
          &lt;/&gt;
      )
  }
  
  export default App
  </code></pre>
  <p>Item.jsx</p>
  <pre><code>import { useState } from 'react'
  
  function Item({ id, name }) {
      const [clicked, setClicked] = useState(false)
      const handleClick = () =&gt; {
          setClicked(!clicked)
      }
      return (
          &lt;&gt;
              &lt;button
                  onClick={handleClick}
                  style={{ color: clicked ? 'red' : 'blue' }}
                  key={id}
              &gt;
                  {name}
              &lt;/button&gt;
          &lt;/&gt;
      )
  }
  
  export default Item
  </code></pre>