title: How to use setTimeout to make a list item wait for some time to restore its original color after a click?
body: <p>I have list items, clicking a list item should turn it red, i want every clicked item to wait for 3000ms to restore its black color again, this is my code</p>
  
  <p>my trial is to use <code>setTimeout</code> in <code>useEffect</code> and setting all <code>red</code> fields to false but this didn't work, especially i need to make every red item to wait 3000ms from turning red to turn black again</p>
  
  <p>The first item to click turn to black after 3000ms correctly, but after that items going black faster!!</p>
  
  <pre><code>  const App = () =&gt; {
          const items = [
              {
                  name: 'mark',
                  id: 1,
                  red: false
              },
              {
                  name: 'peter',
                  id: 2,
                  red: false
              },
              {
                  name: 'john',
                  id: 3,
                  red: false
              }
          ]
  
          const [names, setNames] = useState(items);
  
          const turnItemRed= (id) =&gt; {
              setNames(
                  names.map(i =&gt;  i.id === id ? {...i, red: true} : i))
          }
  
       // this doesn't work
       useEffect(() =&gt; {
           setTimeout(() =&gt; {
               setNames( prev =&gt; prev.map( i =&gt; ({...i, red: false})))
           }, 3000)
       })
  
          return (
              &lt;div class="items-cont"&gt;
                  &lt;ul class="items"&gt;
                      {
                          names.map(i =&gt; {
                              return (
                                  &lt;Item
                                      item={i}
                                      turnItemRed={turnItemRed}
                                  /&gt;
                              )
                          })
                      }
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  
      const Item = ({ item, ...props }) =&gt; {
          const { turnItemRed } = props;
          return (
              &lt;li
                  className={`${item.red ? 'red' : ''}`}
                  onClick={() =&gt; {
                      turnItemRed(item.id)
                  }}
              &gt;
                  {item.name}
              &lt;/li&gt;
          )
      }
      ReactDOM.render(&lt;App /&gt;, document.getElementById('root'))
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.red {
       color: red
    }
  
  </code></pre>