Why I am getting MUI DateTimePicker TypeError: value.isValid is not a function at AdapterDayjs.isValid

I'm encountering an issue with the MUI DateTimePicker component from the @mui/x-date-pickers library when using Day.js as the date adapter. Whenever I try to use the DateTimePicker with Day.js, I get the following error:

value.isValid is not a function TypeError: value.isValid is not a function at AdapterDayjs.isValid (http://localhost:3000/static/js/bundle.js:48844:20) at Object.getTimezone (http://localhost:3000/static/js/bundle.js:67297:58) at http://localhost:3000/static/js/bundle.js:66339:87

my jsx code is:

import React, { useState } from 'react';
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
const initialValues =    {
  startedAt: '', // this might be an issue
  endsAt: dayjs(),
}
export const createCalendar = () => {
  const [formValues, setFormValues] = useState(initialValues);

  const handleDateChange = (date, dateType) =>{
    const formatedDate = dayjs(date).format("MMMM DD, YYYY hh:mm A");
    setFormValues({...formValues,[dateType]:formatedDate})

  }
  const handleSubmit = (e) =>{
    e.preventDefault();
    setFormValues(initialValues);

  }
 return (
     <form onSubmit={handleSubmit} className='space-y-4'>
                <Grid item xs={12}>
                  <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DateTimePicker
                         renderInput={(props) => <TextField {...props}/>}

                        label="Start Date and Time"
                        value={formValues.startedAt}
                        onChange={(newValue)=>
                          handleDateChange(newValue, "startedAt")
                        }
                        inputFormat="MM/dd/yyyy hh:mm a"
                        className='w-full'
                        sx={{width : "100%"}}
                    
                      />
                    </LocalizationProvider>         
                </Grid> 
                <Grid item xs={12}>
                  <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DateTimePicker
                         renderInput={(props) => <TextField {...props}/>}

                        label="End Date and Time"
                        value={formValues.endsAt}
                        onChange={(newValue)=>
                          handleDateChange(newValue, "endsAt")
                        }
                        inputFormat="MM/dd/yyyy hh:mm a"
                        className='w-full'
                        sx={{width : "100%"}}
                    
                      />
                    </LocalizationProvider>         
                </Grid> 
              <Button variant='contained' color='primary' type='submit'>
                  Submit
              </Button>
 </form>
)}

when I try to write startAt and endsAt using empty and null values the form is not even coming in the page. That's why I modified the code to

const initialValues =    {
  startedAt: dayjs(), 
  endsAt: dayjs(),
}

After doing this I can see the datetimepicker in the browser. but whenever I click any date then the error occurs again. I don't know what seems to be the problem . I just want to select the start day of an event and then the end day of that event. but I don't know why AdapterDaysjs is causing the issue. I have this below dependencies package json.

"@mui/x-date-pickers": "^7.4.0",
"dayjs": "^1.11.11",

Keep your values as Dayjs objects, do not convert (format) them into strings:

// Instead of:
const formatedDate = dayjs(date).format("MMMM DD, YYYY hh:mm A");
setFormValues({...formValues,[dateType]:formatedDate})

// ...just do:
setFormValues({
  ...formValues,
  [dateType]: date // Already a Dayjs object
})