Estoy usando el componente mui box react con la propiedad del componente configurada para formar y un conjunto onSubmit para el controlador de envío que necesito activar. Tengo un botón de enviar al final del formulario. Cada vez que hago clic en el botón Enviar, parece que el formulario está enviando una solicitud de obtención, ya que veo los campos del formulario en la cadena de consulta, pero no veo que se llame al controlador de envío. Agregué e.preventDefault() en el controlador y agregué console.log y una declaración de depuración, ninguna de las cuales se alcanza nunca. Además, tampoco se llama al controlador onChange que tengo en los campos de texto. ¿Qué podría estar causando que esto suceda?

manipulador:

 const submitForm = (e) => { e.preventDefault(); console.log('We made it to the expected place.'); debugger; }

Forma:

 <div> <div className="w-100"> <Container> <h1 className="text-center">Login</h1> <Box className="card loginUI" component="form" autoComplete="off" onSubmit={submitForm}> <div className="card-body"> <div className="formFlexContainer"> <div className="formInput"> <TextField className="w-100" id="userName" label="Username" variant="standard" name="userName" onChange={e => {console.log('text change 1'); setUsername(e.target.value)}}/> </div> <div className="formInput"> <TextField className="w-100" id="password" label="Password" variant="standard" name="password" onChange={e => {console.log('text change 2'); setPassword(e.target.value)}}/> </div> <div className="formInput d-flex justify-content-end"> <Button type="submit"> Login </Button> </div> </div> </div> </Box> </Container> </div> </div>