I am creating reusable fields for a dynamic form using Formik and its Field component.

I am having issues trying to implement React-Datepicker with the Field component. My issue is that when I put the date picker component into the Field component, I am unable to manually type the date I wish to enter. I am able to select the date directly from the calendar but I can't type the date. When I do try, it automatically fills in the date the 1st of the month that I typed (e.g. typing 2 gives 02/01/2021). However, validation is working and the value is being set, even though it is not the one I wanted.

When I move the date picker component outside of the Field component, it behaves normally but I am unable to access the errors and I cannot validate it with Formik. I am unsure what is causing the date picker to automatically complete.

I am fine with either using Field or not but I want to connect the date picker with Formik. I am able to use setFieldTouched and handleChange from Formik but setStatus and setFieldError hasn't been working either so I am unable to manually add the error.

Any ideas on what may be causing this? Am I connecting the two incorrectly?

<Field name='datepicker' as={datepickerComp} validate={validate} />

const [date, setDate] = React.useState(null)

React.useEffect(() => {
  handleChange({target: {name: 'datepicker', value: formattedDate(date)}})
}, [handleChange, date])

const onChangeHandler = (val) => {
  setFieldTouched('datepicker', true);
  setDate(val)
}

const datepickerComp = (props) => (
  <DatePicker 
    id="datepicker"
    name="datepicker"
    selected={date}
    onChange={onChangeHandler}
    required
  />
)