title: axios.delete isnt removing item permanently
body: <p>I'm creating a simple react app that user can add contacts to a list with mysql. My delete action isn't permanently remove the item. Not sure what I could to do after my setData. I added the timeout to see if it does in fact delete it, but it is not.</p>
  <pre><code>    const [data, setData] = useState([]);
  
      const loadData = async () =&gt; {
          const response = await axios.get('http://localhost:3001/api/get');
          setData(response.data);
      };
  
      useEffect(() =&gt; {
          loadData();
      }, []);
  
  const deleteContact = (id) =&gt; {
          if(window.confirm ('Are you sure you want to DELETE your contact?')) {
              axios.delete(`http://localhost:3001/api/remove/${id}`);
              toast.success('Contact deleted successfully');
              setData(
                  data.filter((post) =&gt; {
                     return post.id !== id;
                  })
              );
              setTimeout(() =&gt; {
                  loadData();                
              }, 1000);
          }
      }
  </code></pre>
  <p>button that it uses</p>
  <pre><code>&lt;button className='btn delete-btn' onClick={() =&gt; deleteContact(item.id)}&gt;Delete&lt;/button&gt;
  </code></pre>
  <p>MY api endpoint</p>
  <pre><code>app.delete('/api/remove/:id', (req, res) =&gt; {
      const id = req.body;
      const sqlRemove = `DELETE FROM contact_db WHERE id = ?`;
      db.query(sqlRemove,[ id ], (err, result) =&gt; {
          if(err) {
              console.log(err);
          }
      });
  });
  </code></pre>
  <p>Any suggestions would be great!</p>