How to validate react date picker using react form hook - react-hooks

Question

I am using a data-picker for one of my projects and trying to validate using yup. but I'm to show an error message but it is not hiding after a date is selected. any help is much appreciated.
Here is my schema
let schema = yup.object().shape({
expiry_date: yup.date().required("Please enter expiry date")
});
<Controller
name="expiry_date"
control={control}
render={({ field }) => (
<DatePicker {...field} selected={startDate} onChange={(date) => onDateChange(date)} />
)}
/>
{errors.expiry_date && <p className="error">{errors.expiry_date?.message}</p>}

Answer 1

Your example is bit incomplete, but I was able to add date picker into a formik form and it was working:
// DatePickerTest.tsx
import React from 'react';
import { FormkiValues, useFormik} from 'formik';
import * as yup from 'yup';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
interface IFormikValues {
// ... some other
expiry_date: Date;
}
const validationSchema = yup.object({
// ... some other
expiry_date: yup.date().required("Please enter expiry date")
});
const DatePickerText:React.FC = ():JSX.Element => {
const formik = useFormik<IFormikValues>({
initialValues: {
// ... some other
expiry_date: new Date()
},
validationSchema,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<div>
<form onSubmit={formik.handleSubmit}>
{/* some other fields */}
<DatePicker
id="expiry_date"
name="expiry_date"
selected={formik.values.expiry_date}
onChange={(date) => {
formik.setFieldValue('expiry_date',date);
}}
/>
{formik.errors.expiry_date && <p className="error">{formik.errors.expiry_date}</p>}
{/* some other fields */}
<button type="submit" disabled={formik.isSubmitting}>Submit</button>
</form>
</div>);
};
export default DatePickerTest;
Yuu may check if your date value update function onDateChange is updating the formik values.