如何在 react-date-range DateRange 包中获取开始日期和结束日期，以及在 reactjs 中使用 formik 和 yup 进行验证

Question

const [selectionRange, setSelectionRange] = useState({ 
       startDate: new Date(),
       endDate: null,
       key: 'selection',
   });

const handleSelect = (ranges, { setFieldValue }) => {
setSelectionRange(ranges.selection);
setFieldValue('startDate', ranges.selection.startDate);
setFieldValue('endDate', ranges.selection.endDate);
}

<Formik
initialValues={{
startDate: null,
endDate: null,
}}
onSubmit={(formData, { resetForm }) => {
console.log(formData)
}}
validationSchema={Yup.object({
startDate: Yup.date().typeError('Date is required'),
endDate: Yup.date().typeError('End date is required'),
})
}

> 

{(runform) => (
    <form onSubmit={runform.handleSubmit}>
        <DateRange
            name="date"
            onChange={(ranges) => handleSelect(ranges, runform)}
            moveRangeOnFirstSelection={false}
            ranges={[selectionRange]}
        />
{runform.errors.startDate ? <span className="error text-danger">{runform.errors['startDate']}</span> :
runform.errors.endDate ? <span className="error text-danger">{runform.errors['endDate']}</span> : null}
    </form>
)}