MERN Delete request issues

I'm wokring on a simple suggestion app it has authenctication and context api for State management, I can create, read, update and delete a suggestion but I've been trying to make a delete request but its not working. I console.log the error message due to the conditional statement and its saying Request failed with status code 403 I've tried everything but its not working

this is my code on expresss

router.delete("/bmi/delete/:id", async (req, res) => {
  const id = req.params.id;
  try {
    const suggest = await bmiCalc.findById(id);
    if (suggest.userId === req.body.userId) {
      await suggest.deleteOne();
      res.status(200).json("Suggestion deleted");
    } else {
      res.status(403).json("Not your Suggestion to delete");
    }
  } catch (error) {
    res.status(500).json("Error from server");
  }
});

This is the react axios request

const Home = () => {
  const { user } = useContext(AuthContext);
  const [data, setData] = useState([]);
const handleSuggestion = async (e) => {
    e.preventDefault();

    const fullDetail = {
      userId: user.users._id,
      bmiNumber: bmiNumber.current.value,
      country: country.current.value,
      messages: messages.current.value,
    };
    const res = await axios.post(
      "http://localhost:5000/app/bmi/bmiform/create",
      fullDetail,
    );
    setData([...data, res.data]);
    console.log(res.data);
  };

  const reload = () => {
    window.location.reload();
  };

  useEffect(() => {
    const getSuggestion = async () => {
      const res = await axios.get(
        `http://localhost:5000/app/bmi/all/${user.users._id}`,
      );
      await setData(res.data);
    };
    getSuggestion();
  }, [user.users._id]);

  const handleDelete = async (id) => {
    try {
      await axios.delete(`http://localhost:5000/app/bmi/delete/${id}`, {
        data: { userId: user.users._id },
      });

      setData(data.filter((post) => post._id !== id));
    } catch (err) {
      console.log(err.message);
    }
  };

I'm using chakra UI, here is the button for the onclick event

<Flex
        w={"100%"}
        h={"60vh"}
        padding={"8px"}
        gap={"8px"}
        flexWrap={"wrap"}
        justifyContent={"flex-start"}>
        {data.map((data) => {
          return (
            <Box
              key={data._id}
              width={["47%", "55%", "25%", "24%"]}
              height={["55%", "50%", "50%", "50%"]}
              bg={"#ffffff"}
              display={"flex"}
              flexDirection={"column"}
              borderRadius={7}
              gap={4}
              padding={5}>
              <Box w={"100%"} h={"5vh"} transition={"0.3s all"}>
                <p className='boxTitle'> BMI: {data.bmiNumber}</p>
                <p className='boxCountry'> {data.country}</p>
              </Box>
              <Box width={"100%"} height={"100%"} paddingTop={2}>
                <p className='boxMessage'> {data.messages}</p>
              </Box>
              <Flex width={"100%"} gap={1}>
                <Button
                  bg={"#541db5"}
                  type='submit'
                  width='100%'
                  outline='none'
                  border='none'
                  borderRadius={6}
                  color='#ffffff'
                  fontSize={20}
                  fontWeight={600}
                  marginBottom={4}
                  padding={4}>
                  edit
                </Button>
                {data.userId === user?.users._id && (
                  <Button
                    onClick={() => handleDelete(data._id)}
                    type='submit'
                    width='100%'
                    outline='none'
                    border='none'
                    borderRadius={6}
                    color='#ffffff'
                    fontSize={20}
                    fontWeight={600}
                    bg='#ef233c'
                    marginBottom={4}
                    padding={4}>
                    <DeleteIcon />
                  </Button>
                )}
              </Flex>
            </Box>
          );
        })}
      </Flex>