I've got a couple of material ui date picker components wrapped around a Field component from Formik. I'm validating data with the following yup validation schema:

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(),
});

This is how I'm wrapping the

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

The error occurs for me only when I change the date on the endDate field. The problem is that it will cause an error even if the startDate is in fact before the endDate. The error then goes away if the startDate field changes. But at that point I'm unable to submit the form.

I'm not sure what I'm doing wrong here. I've checked a few answers on SO, but all seem to have the same issue.