title: how to add the functionality where the delete button should change to undo (for 10 secs) on click of which the item is not deleted
body: <p><a href="https://stackblitz.com/edit/vitejs-vite-bmqg1t?file=src%2FApp.css,src%2FApp.jsx,index.html&amp;terminal=dev" rel="nofollow noreferrer">complete code in stalkbiltz </a></p>
  <p><strong>it will be very helpful if you can point me in the direction
  I want to add a timmer when clicking the delete button timer should count down for 10 seconds delete button should change to undo (for 10 secs) on the click of which the item is not deleted</strong></p>
  <pre><code>      *&lt;ul&gt;
          {items.map((item) =&gt; {
            return (
              &lt;li
                key={item.id}
                style={{ textDecoration: item.done ? &quot;line-through&quot; : null }}
              &gt;
                &lt;Checkbox
                  onClick={() =&gt; onChangeBox(item)}
                  defaultChecked={item.done}
                /&gt;
                {item.value}{&quot; &quot;}
                &lt;button
                  className=&quot;del-button&quot;
                  onClick={() =&gt; deleteItem(item.id)}
                &gt;
                  ❌
                &lt;/button&gt;{&quot; &quot;}
              &lt;/li&gt;
            );
          })}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;*
  </code></pre>