I am building a form using React and MUI. I want to prevent the form from being submitted when the user presses the enter key. Normally I would do that with e.preventDefault(), but somehow that doesn't work. I think it has something to do with the TextField component from MUI.

Here is a simple example for my form and here is

function MyForm() {
  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      /* do submit stuff here */
    }}>
      <TextField id="outlined-basic" label="Outlined" variant="outlined" />
      <Button type='submit'>Submit</Button>
    </form>
  );
}

Am I doing something wrong here?