MUI DatePicker與Formik不相容：date.isBefore不可用

Question

我正在使用Formik在React中建立一個表單，同時也在使用MUI元件。問題是我遇到了以下錯誤：

date.isBefore不是函數
TypeError: date.isBefore不是一個函數
    at DayjsUtils.isBeforeDay (http://localhost:3000/static/js/bundle.js:2319:19)
    at validateDate (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10596:43)
    at useValidation (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10654:27)
    at usePickerValue (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10019:75)
    at usePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:9876:94)
    at useDesktopPicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:7848:60)
    at DesktopDatePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:3956:90)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:103306:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:105877:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:107924:20)

這是我的程式碼：

<Formik
          onSubmit={handleFormSubmit}
          initialValues={initialValuesProject}
          validationSchema={projectSchema}
        >
          {({ values, handleChange, handleSubmit, setFieldValue }) => (
            <form onSubmit={handleSubmit}>
                  <Box width="50%">
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                      <DatePicker
                        id="project_start"
                        name="project_start"
                        value={values.project_start}
                        slotProps={{
                          textField: {
                            size: "small",
                            margin: "dense",
                          },
                        }}
                      />
                      <DatePicker
                        id="project_end"
                        name="project_end"
                        value={values.project_end}
                        slotProps={{
                          textField: { size: "small", margin: "dense" },
                        }}
                      />
                    </LocalizationProvider>
              </Box>
            </form>
          )}</Formik>

這是模式與初始值：

const projectSchema = yup.object().shape({
  project_start: yup.date(),
  project_end: yup.date(),
  project_name: yup.string().required("required"),
  usersId: yup.string(),
  partnerId: yup.string(),
  categoryId: yup.string(),
});

const initialValuesProject = {
  project_start: Date.now(),
  project_end: Date.now(),
  project_name: "",
  usersId: "",
  partnerId: "",
  categoryId: "",
};

非常感謝能幫助我的任何人 <3

能夠使日期選擇器工作

Answer 1

看起來問題出在這裡：

project_start: Date.now(),
project_end: Date.now(),

project_start和project_end的型別應該是Dayjs：

import dayjs, { Dayjs } from 'dayjs';

const initialValuesProject = {
  project_start: dayjs(Date.now()),
  project_end: dayjs(Date.now()),
  project_name: "",
  usersId: "",
  partnerId: "",
  categoryId: "",
};