Axios delete Bad Request (ReactJS)

I want to delete the data, but also fail. The error message is 400 Bad Request. In the Backend allowOrigin is true. How to solve this?

This the code

export const Admin = () => {
  const [movies, setMovies] = useState([])
  const [loaded, setLoaded] = useState(false)
  const [errorMessage, setErrorMessage] = useState(null)

  useEffect(() => {
    const fetchMovies = async () => {
      try {
        const result = await axios(`http://localhost:4001/movies`);
        await setMovies(result.data.data);
        setLoaded(true)
      } catch (err) {
        setErrorMessage(err.response.data)
      }
    }
    fetchMovies();
  }, [])

  const confirmDelete = async (id) => {
    const payload = {
      id: id.toString(),
    }

    await axios.delete(
      'http://localhost:4001/admin/movies/delete',
      {
        data: JSON.stringify(payload),
      }
    )
  }

  return (
    <>
        <Table striped bordered hover>
          <thead>
            ...
          </thead>
          <tbody>

            {movies.map((movie, index) => (
              <tr key={index}>
                <td>{index + 1}</td>
                <td>
                  <Link to={`/movies/${movie.id}`} className="text-decoration-none text-black">
                    {movie.title}
                  </Link>
                </td>
                <td>
                  <Link to={`movies/${movie.id}/edit`} className="text-white text-decoration-none btn btn-warning btn-sm">
                    Edit
                  </Link>
                  {' '}
                  <span
                    className="text-white text-decoration-none btn btn-danger btn-sm"
                    onClick={() => confirmDelete(movie.id)}
                  >
                    Delete
                  </span>
                </td>
              </tr>
            ))}
          </tbody>

        </Table>
    </>
  );
}