I need to set disable or enable in the field in the checkbox using useformik

Question

I need to set like if the check box is not selected then date field stay in disabling if check box selected mean true date appear date field is getting disable but when I check on the check box that disables and also i checking true and false condition enables functionality not working I am not sure what I missed need to set this invalidation in proper validation I am using useFormik

const validationSchema = Yup.object().shape({
  list: Yup.array().of(Yup.string()).min(1, "Required!").required("Required!"),
  isCheck: Yup.boolean(),
  startDate: Yup.string().when("isCheck", {
    is: true,
    then: Yup.string().required("Required!"),
    otherwise: Yup.boolean,
  }),
  isCheck: Yup.boolean(),
  endDate: Yup.string().when("isCheck", {
    is: true,
    then: Yup.string().required("Required!"),
    otherwise: Yup.boolean,
  }),
});

const ruleForm = useFormik({
    initialValues: {
      // Status: "que",
    },
    validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
      deltaChange(values);
    },
  });

           <Box className={classes.formText}>
                    <Checkbox
                      checked={ruleForm.values.isCheck}
                      onChange={ruleForm.handleChange}
                      color="primary"
                      inputProps={{ "aria-label": "secondary checkbox" }}
                    />
                    <Typography variant="subtitle2" noWrap={true}>
                      <Box fontWeight="fontWeightBold"> By Update Date : </Box>
                    </Typography>
                  </Box>
                  <Grid container display="flex" spacing={4}>
                    <Grid item xs={6}>
                      <TextField
                        id="outlined-select-currency"
                        label="Start Date"
                        variant="outlined"
                        disabled={!ruleForm.values.isCheck}
                        size="small"
                        type="date"
                        InputLabelProps={{
                          shrink: true,
                        }}
                        onChange={ruleForm.handleChange}
                        value={ruleForm.values.startDate}
                        error={ruleForm.errors.startDate}
                        helperText={ruleForm.errors.startDate}
                        name="startDate"
                      ></TextField>
                    </Grid>
                    <Grid item xs={6}>
                      <TextField
                        id="outlined-select-currency"
                        label="End Date"
                        variant="outlined"
                        size="small"
                        // onChange={(e) => setDate(e)}
                        type="date"
                        disabled={!ruleForm.values.isCheck}
                        InputLabelProps={{
                          shrink: true,
                        }}
                        onChange={ruleForm.handleChange}
                        value={ruleForm.values.endDate}
                        error={ruleForm.errors.endDate}
                        helperText={ruleForm.errors.endDate}
                        name="endDate"
                      ></TextField>
                    </Grid>
                  </Grid>

Answer 1

You might want to try this

const validationSchema = Yup.object().shape({
  list: Yup.array().of(Yup.string()).min(1, "Required!").required("Required!"),
  isCheck: Yup.boolean(),
 startDate: Yup.string().when('isCheck', {
    is: (isCheck: boolean) => isCheck === true,
    then: Yup.string().required("Required!"),
  }),
  endDate: Yup.string().when("isCheck", {
     is: (isCheck: boolean) => isCheck === true,
    then: Yup.string().required("Required!"),
  }),
});