Tengo un par de componentes de selección de fecha de interfaz de usuario de material envueltos alrededor de un componente de campo de Formik. Estoy validando datos con el siguiente esquema de validación yup:

 import { object, string, number, array, date, ref } from 'yup'; import emptyStringToNull from 'helpers/emptyStringToNull'; // yup schema for input validation export const curriculaSchema = object({ startDate: date().required(), endDate: date() .min(ref('startDate'), "End date can't be before Start Date") .required(), location: object({}), standardsSets: array(), });

Así es como estoy envolviendo el

 <Grid item xs={4} sx={{ marginTop: 1.5 }}> <Field name='startDate' component={DatePicker} label='Start Date' TextFieldProps={{ fullWidth: true }} disabled={!isEditing} /> </Grid> <Grid item xs={4} sx={{ marginTop: 1.5 }}> <Field name='endDate' component={DatePicker} label='End Date' TextFieldProps={{ fullWidth: true }} disabled={!isEditing} /> </Grid>

El error me ocurre solo cuando cambio la fecha en el campo endDate. El problema es que causará un error incluso si la fecha de inicio es anterior a la fecha de finalización. El error desaparece si cambia el campo startDate. Pero en ese momento no puedo enviar el formulario.

No estoy seguro de lo que estoy haciendo mal aquí. Revisé algunas respuestas en SO, pero todas parecen tener el mismo problema.