Estoy usando el selector Material Ui DateTime en un formulario. Después de enviar el formulario, aparece el siguiente error:

Formato de fecha no válido

Imagen

Estoy usando JSON Server en mi aplicación de reacción para guardar datos.

Este es el elemento de salida para el selector de fecha y hora en DOM.

 <input aria-invalid="false" readonly="" type="text" class="MuiInputBase-input MuiInput-input" value="March 16th 08:50 am">

Estos son datos en db.json.

 { "text": "study", "day": "2022-03-16T05:20:00.000Z", "reminder": true, "id": 1 }

Este es mi código para Agregar fecha.

 import { useState } from "react"; import DateFnsUtils from "@date-io/date-fns"; import { MuiPickersUtilsProvider } from "@material-ui/pickers"; import "date-fns"; import { DateTimePicker } from "@material-ui/pickers"; const AddTask = ({ onAdd }) => { const [day, setDay] = useState(new Date()); const onSubmit = (e) => { e.preventDefault(); onAdd({ day }); setDay(""); }; return ( <form className="add-form" onSubmit={onSubmit}> <div className="form-control"> <label>Day & time</label> <MuiPickersUtilsProvider utils={DateFnsUtils}> <DateTimePicker disableToolbar variant="inline" value={day} onChange={(day) => { setDay(day); }} autoOk /> </MuiPickersUtilsProvider> </div> </form> ); };

Te agradecería si me ayudas. Gracias