Estoy creando campos reutilizables para un formulario dinámico usando Formik y su componente Field.

Tengo problemas al intentar implementar React-Datepicker con el componente Field . Mi problema es que cuando coloco el componente selector de fecha en el componente Campo, no puedo escribir manualmente la fecha que deseo ingresar. Puedo seleccionar la fecha directamente desde el calendario, pero no puedo escribir la fecha. Cuando lo intento, automáticamente completa la fecha el 1 del mes que escribí (por ejemplo, escribir 2 da 02/01/2021). Sin embargo, la validación está funcionando y el valor se está configurando, aunque no es el que quería.

Cuando muevo el componente del selector de fecha fuera del componente de campo, se comporta normalmente pero no puedo acceder a los errores y no puedo validarlo con Formik. No estoy seguro de qué está causando que el selector de fechas se complete automáticamente.

Estoy de acuerdo con usar Field o no, pero quiero conectar el selector de fecha con Formik. Puedo usar setFieldTouched y handleChange de Formik, pero setStatus y setFieldError tampoco han funcionado, por lo que no puedo agregar el error manualmente.

¿Alguna idea sobre lo que puede estar causando esto? ¿Estoy conectando los dos incorrectamente?

 <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 /> )