Javascript Material UI(dateTime picker)：Invalid Date Format message after submission

我正在表单中使用material Ui DateTime Select 器.提交表单后，我发现以下错误:

无效的日期格式

Image

我在react应用程序中使用JSON服务器来保存数据.

This is the output Element for the DateTime picker on DOM.

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

这是数据库上的数据.json.

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

这是我添加日期的代码.

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>
);
};

如果你能帮助我，我将不胜感激.谢谢