MUI DatePicker is not compatible with Formik: date.isBefore is not available

Question

I am using Formik to create a form in React and also using MUI components.The problem is that I get the following error:

date.isBefore is not a function
TypeError: date.isBefore is not a function
    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)

This is my code:

<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>

This is the mode and initial values:

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: "",
};

Many thanks to anyone who can help me <3

Be able to make date picker work

Answer 1

Looks like the problem lies here:

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

The types of project_start and project_end should be Dayjs:

import dayjs, { Dayjs } from 'dayjs';

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