MUI DatePicker 正在验证但验证时未显示为红色轮廓

Question

我正在尝试在我的一个项目中使用 Material UI + useFormik + yup 进行表单控制和验证。我在 MUI datePicker 中添加了验证并且验证工作正常但 DatePicker 轮廓在验证时没有变红。

验证模式：

  const validationSchema = yup.object().shape({
  location: yup.string("Enter Location").required("Location is required"),
  adults: yup.number("Enter number of Adults").required("Adult is required"),
  currency: yup.string("Enter Currency").required("Currency is required"),
  checkin: yup.date().required("enter the date")
  // checkout: yup.string("Enter Check-out Date").required("Check-Out date is required")
});

MUI 日期选择器：

 <DatePicker label='check-in' renderInput={(params)=><TextField {...params}

        error={formik.touched.checkin && Boolean(formik.errors.checkin)}
        helperText={formik.touched.checkin && formik.errors.checkin}
      />}
      value={formik.values.checkin}
      sx={{width:'195px',margin:'10px 30px 10px 10px'}}
      onChange={(value)=>formik.setFieldValue("checkin", dateFormat(value, "yyyy-mm-dd"))}
      disablePast
      format='YYYY-MM-DD'
      />

或者，我也在 textField 之外添加了验证，但仍然无法正常工作。 像这样：

<DatePicker label='check-in' renderInput={(params)=><TextField {...params}/>}
      value={formik.values.checkin}
      sx={{width:'195px',margin:'10px 30px 10px 10px'}}
      onChange={(value)=>formik.setFieldValue("checkin", dateFormat(value, "yyyy-mm-dd"))}
      disablePast
      format='YYYY-MM-DD'
      error={formik.touched.checkin && Boolean(formik.errors.checkin)}
      helperText={formik.touched.checkin && formik.errors.checkin}
    
      />

这里在签到字段中添加验证