Validating a MUI Datepicker with YUP in a react-hook-form - reactjs

Question

I have a date picker that needs to validate the following scenarios:
It is a required field and cannot be left blank
The date must be later minDate (21 days from today )
The date must be earlier than six months from minDate
The validation schema I came up with looks as follows, which, works unexpectedly.
import * as yup from 'yup'
import { addDays, addMonths, format} from 'date-fns'
const today = Date.now()
const minDate = addDays(today, 21)
const maxDate = addMonths(minDate, 6)
const schema = yup.object().shape({
Date: yup
.date()
.min(minDate, `Date must be after ${format(minDate,'MM/dd/yyyy')}`)
.max(maxDate, `Date must be before ${format(maxDate, 'MM/dd/yyyy') }`)
.typeError("Date is required")
})
What do I mean by it works unexpectedly
When you click the submit button for the first time, the
typeError() message is display.(Expected behavior)
Then, if you selected a date from by clicking on the calendar icon,
the date gets displayed and the error disappear. (Expected behavior)
Finally, if I manually clear the selected day the min() error
message gets displayed. (make sense but is not what I expected)
It makes sense because, as the date gets transformed with every keystroke, the min() the error message is triggered, but eventually, the date is not valid and its value becomes null.
Question: So, at this point should the typeError() message be displayed?
Date picker code
import React, { useState } from 'react'
import { Controller } from 'react-hook-form'
import TextField from '#mui/material/TextField'
import { AdapterDateFns } from '#mui/x-date-pickers/AdapterDateFns'
import { LocalizationProvider } from '#mui/x-date-pickers/LocalizationProvider'
import { DesktopDatePicker } from '#mui/x-date-pickers/DesktopDatePicker'
import { addDays, addMonths, format, isValid } from 'date-fns'
const Calendar = ({ control, name, label, error, helperText, ...rest }) => {
const today = Date.now()
const [value, setValue] = useState(null);
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Controller
name={name}
control={control}
render={({ field }) => (
<DesktopDatePicker
label={label}
value={value}
minDate={addDays(today, 21)}
maxDate={addMonths(addDays(today, 21), 6)}
onChange={(newValue) => {
if (isValid(newValue))
{
field.onChange(format(newValue, 'MM/dd/yyyy'))
setValue(newValue)
} else
{
setValue(newValue)
}
}}
renderInput={(params) =>
<TextField
margin='normal'
helperText={helperText}
{...params}
{...rest}
error={error}
/>
}
/>
)}
/>
</LocalizationProvider>
)
}
export default Calendar
CHECK WORKING EXAMPLE >