Getting "TypeError date.isBefore is not a function" while using material ui date-picker with formik

Getting "TypeError date.isBefore is not a function" while using material ui date-picker with formik.Can you help me where I am going wrong. I want to get value of dob field in values object of formik.

==========================================================================
My attempt:

import React from "react";
import { Formik } from "formik";
import { Box, Button, Paper, Stack, TextField, styled } from "@mui/material";
import { Lock } from "@mui/icons-material";
import * as yup from "yup";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
// import dayjs from 'dayjs';
const LoginPage = () => {
const StyledPaper = styled(Paper)({
width: "500px",
borderRadius: "10px",
backgroundColor: "white",
padding: "30px",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
});
//----VALIDATION-----//
const userSchema = yup.object().shape({
userName: yup.string().required("required"),
dob: yup.date().required("required")
});
const handleFormSubmit = (values, onSubmitProps) => {
console.log(values);
};
return (
<Formik
onSubmit={handleFormSubmit}
initialValues={{ userName: "", dob: new Date() }}
validationSchema={userSchema}
>
{({
values,
errors,
touched,
handleBlur,
handleChange,
handleSubmit,
resetForm
}) => (
<form onSubmit={handleSubmit}>
<StyledPaper elevation={3}>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
margin: "10px"
}}
>
<Lock color="primary" fontSize="large" />
</Box>
<Stack direction="column" gap={2}>
<TextField
label="User Name"
value={values.userName}
onChange={handleChange}
onBlur={handleBlur}
name="userName"
error={Boolean(touched.userName) && Boolean(errors.userName)}
helperText={touched.userName && errors.userName}
/>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Date of birth"
value={values.dob}
onChange={handleChange}
onBlur={handleBlur}
name="dob"
error={Boolean(touched.dob) && Boolean(errors.dob)}
helperText={touched.dob && errors.dob}
/>
</LocalizationProvider>
<Button variant="contained" type="submit">
Submit
</Button>
</Stack>
</StyledPaper>
</form>
)}
</Formik>
);
};
export default LoginPage;

=========================================================================================

Please find below the sandbox link-

text

DatePicker is expecting dayjs, to fix:

1. Uncomment the dayjs import from your code and

2. Change the value prop for DatePicker

    import dayjs from 'dayjs';
   <DatePicker
   label="Date of birth"
   value={dayjs(values.dob)}
   onChange={handleChange}
   onBlur={handleBlur}
   name="dob"
   error={Boolean(touched.dob) && Boolean(errors.dob)}
   helperText={touched.dob && errors.dob}
   />