Error while deleting, saying: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST'

I am currently creating a Supplements store system and I am using MERN Stack and Axios. I cannot figure out why the delete function isn't working. I am new at this so please have a look at this.

P.S. : The backend of the code is working fine. I checked it with the POSTMAN. The issue is with the onDelete function.

Backend

    router.route("/delete/:id").delete(async (req,res) => {
    let supplementId = req.params.id;

    await Supplement.findByIdAndDelete(supplementId)
    .then(() => {
        res.status(200).send({status: "Supplement Deleted"})
    }).catch((err)=>{
        console.log(err);
        res.status(500).send({status: "Error when deleting data", error : err.message});
    });
})

Front end

Delete Operation

    const getData = () => {
    axios.get(`http://localhost:8000/supplement/`)
    .then((res) => {
      setSupplements(res.data);
    })
  }

  const onDelete = (id) => {
    axios.delete(`/delete/${id}`)
    .then(() => {
      alert("Deleted Successfully!")
      getData();
    })
    .catch((err) => 
        {
          alert(err.message);
        });
  }

Button

<Button variant="outline-danger" onClick={() => 
              onDelete(supplement._id)}>
                Delete</Button>