MUI DatePicker is validating but not showing up as red outline when validating

Question

I am trying to use Material UI + useFormik + yup for form control and validation in one of my projects. I have added validation in MUI datePicker and validation is working but the DatePicker outline is not getting red while validating.

Validation Schema:

  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 Date Picker:

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

Alternatively I have added Validation outside the textField also but still not working. Like This:

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

Here adding validation in Check-in field