MUI DatePicker tidak serasi dengan Formik: date.isBefore tidak tersedia

Question

Saya menggunakan Formik untuk mencipta borang dalam React dan juga menggunakan komponen MUI.Masalahnya ialah saya mendapat ralat berikut:

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

Ini kod saya:

<Formik
          onSubmit={handleFormSubmit}
          initialValues={initialValuesProject}
          validationSchema={projectSchema}
        >
          {({ values, handleChange, handleSubmit, setFieldValue }) =>
            <borang onSubmit={handleSubmit}>
                  <Lebar kotak="50%">
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                      <Pemilih Tarikh
                        id="project_start"
                        name="project_start"
                        value={values.project_start}
                        slotProps={{
                          medan teks: {
                            saiz: "kecil",
                            jidar: "padat",
                          },
                        }}
                      />
                      <Pemilih Tarikh
                        id="project_end"
                        name="projek_tamat"
                        value={values.project_end}
                        slotProps={{
                          textField: { saiz: "kecil", jidar: "padat"
                        }}
                      />
                    </Penyedia Penyetempatan>
              </Kotak>
            </form>
          )}</Formik>

Ini ialah mod dan nilai awal:

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

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

Ribuan terima kasih kepada sesiapa yang boleh membantu saya <3

Dapat membuat pemilih tarikh berfungsi

Answer 1

Nampaknya masalahnya di sini:

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

Jenis projek_mula dan projek_akhir hendaklah Dayjs:

import dayjs, { Dayjs } from 'dayjs';

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