MUI DatePicker は Formik と互換性がありません: date.isBefore は使用できません

Question

Formik を使用して React でフォームを作成し、MUI コンポーネントも使用しています。問題は、次のエラーが発生することです。

date.isBefore は関数ではありません
TypeError: date.isBefore は関数ではありません
    DayjsUtils.isBeforeDay (http://localhost:3000/static/js/bundle.js:2319:19)
    validateDate (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10596:43)
    useValidation 時 (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10654:27)
    usePickerValue で (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10019:75)
    usePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:9876:94) で
    useDesktopPicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:7848:60) で
    DesktopDatePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:3956:90) で
    renderWithHooks (http://localhost:3000/static/js/bundle.js:103306:22) で
    updateForwardRef で (http://localhost:3000/static/js/bundle.js:105877:24)
    beginWork (http://localhost:3000/static/js/bundle.js:107924:20)

で

これは私のコードです:

<Formik
          onSubmit={ハンドルフォーム送信}
          初期値={初期値プロジェクト}
          validationSchema={プロジェクトスキーマ}
        >
          {({ 値, handleChange, handleSubmit, setFieldValue }) => (
            <フォームonSubmit={handleSubmit}>
                  <ボックス幅="50%""
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                      <日付ピッカー
                        id="プロジェクト_スタート"
                        名前= "プロジェクト_スタート"
                        値={values.project_start}
                        スロットProps={{
                          テキストフィールド： {
                            サイズ: "小さい"、
                            マージン: 「密」、
                          }、
                        }}
                      />
                      <日付ピッカー
                        id="プロジェクト終了"
                        名前= "プロジェクトの終了"
                        値={values.project_end}
                        スロットProps={{
                          textField: { サイズ: "小さい"、マージン: "密" },
                        }}
                      />
                    </LocalizationProvider>
              </ボックス>
            </フォーム>
          )}</Formik>

これはモードと初期値です:

const projectSchema = yup.object().shape({
  project_start: yup.date()、
  プロジェクト終了: yup.date()、
  project_name: yup.string().required("required"),
  ユーザー ID: yup.string()、
  パートナー ID: yup.string()、
  categoryId: yup.string()、
});

const 初期値プロジェクト = {
  project_start: Date.now()、
  project_end: Date.now()、
  プロジェクト名: ""、
  ユーザー ID: ""、
  パートナー ID: ""、
  カテゴリ ID: ""、
};

私を助けてくれる人に感謝します<3

日付ピッカーを機能させることができるようにする

Answer 1

問題はここにあるようです:

リーリー

project_start と project_end のタイプは Dayjs である必要があります:

リーリー