Using form with MUI onSubmit method not working

<Box component="form" onSubmit={submitHandler}>
    <TextField />
    <Button type="submit">Submit</Button>
</Box>

You are overriding your MUI component, so the Box is already assuming itself as a form component.

Consider reading the Overriding MUI components from the MUI documentation.

<form {...extraPropsFromBox}>
  <form onSubmit={submitHandler}>
    <TextField />
    <Button type="submit">Submit</Button>
  </form>
</form>

Nested form is not supported in HTML 5 and using it is asking for trouble, in this case it probably ignores the submit handler in the nested form, the fix is remove the outer one. If you don't have a need to style the form container, just use a normal form tag. Use Box + form if you want to apply some styles quickly:

<Box component="form" onSubmit={submitHandler} sx={{ maxWidth: 300, bgcolor: 'gray' }}>
    <TextField />
    <Button type="submit">Submit</Button>
</Box>

All MUI components have a component prop that allows you to override the root component. Below is what the Box looks like under-the-hook. You do not have to specify the component because they all have a default value:

function Box({ component = 'div', ...boxProps }) {
  return <component {...boxProps} />
}

<Button type="submit">Submit</Button>