My delete function will not work using react frontend but backend are okay its working

Question

I'm new to React. I am working on a react application that communicates with a MYSQL database. When i open the application I get a list of all the students who are registered in the database. When I click on a specific student I get more information about them, and I can edit their info Delete button Not working using react. I can do axios call to delete in postman but when I try to do it on the front-end in react, my delete function will not work. Please help me

export default function UCategoryDashboard() {


  const [ucat1tableData, setucat1TableData] = useState([])

  useEffect(() => {
    fetch("http://localhost:3001/getsubcategory1")
      .then((data) => data.json())
      .then((data) => setucat1TableData(data))

  }, [])

  console.log(ucat1tableData)

  const handleDelete = (idsub_category) => {
    Axios.delete(`http://localhost:3001/ucategorydel/${idsub_category}`)
   
  }
  const view = (idsub_category) => {
    Axios
    .get(`http://localhost:3001/ucategory/${idsub_category}`)
    .then(res => {
        console.log(res);
    })
}

  const columns = [
    { field: "idsub_category", headerName: "ID", width: 90 },
    { field: "sub_categoryid", headerName: "Category ID", width: 130 },
    { field: "sub_categoryname", headerName: "Category Name", width: 150 },
    { field: "maincategoryname", headerName: "Main Category", width: 200 },

    {
      field: "action",
      headerName: "Action",
      width: 150,
      renderCell: (params) => {
        return (
          <>
            <Link to={`/ucategory/${params.row.idsub_category}` } >
              <button className="productListEdit"  onClick={()=> {view(params.row.idsub_category)}} >Edit</button>
            </Link>
          </>
        );
      },
    },
    {
      field: "delete",
      headerName: "Delete",
      width: 150,
      renderCell: (params) => {
        return (
          <>
       
            <button 
              className="productListDelete"
              onSubmit={() => handleDelete(params.row.idsub_category)}
            >Delete</button>
          </>
        );
      },
    },
  ]; 
 return (

    <div className="productList" style={{ top: '100px', height: 400, width: '50%' }}>
      <br></br>
      <h1 className="newUserTitle"> Category </h1>
      <br></br>
      <br></br>
      <DataGrid
        rows={ucat1tableData}
        disableSelectionOnClick
        columns={columns}
        pageSize={8}
        getRowId={(row) => row.idsub_category}
        checkboxSelection
      />
      <br></br>


    </div>
  );
}

I don't understand why the button is not working.