hi i have a react project i use react hook form and yup for validation, i have a this component: 
```
import {
  useForm,
  useQueryRequest,
  yupResolver,
  Grid,
  Controller,
  SelectField,
  getZonesList,
  getBasicPriceNameList,
  useState,
  getALLStates,
  getCitiesByState,
  Button,
  CheckBox,
  useRef,
} from "@imports";
import { SLAStateCitiesFormSchemaGenerator } from "@src/schema";
import { OutputUseQueryType } from "@src/types/generalTypes";
import {
  SLAListRowDataType,
  CitiesOutputType,
  CitiesType,
  SLAListOutputType,
  SLAZonesType,
  SLACitiesSubmitHandlerInputType,
  StatesOutputType,
  StatesType,
  GetSLAZonesOutputType,
} from "@src/types/services/SLACitiesType";
type SLAStateCitiesFormProps = {
  submitHandler: (data: SLACitiesSubmitHandlerInputType) => void;
  isMultiSelect: boolean;
  buttonTitle: string;
  disables: boolean;
  defaultData: SLACitiesSubmitHandlerInputType;
};

const SLAStateCitiesForm: React.FC<SLAStateCitiesFormProps> = ({
  submitHandler,
  isMultiSelect,
  buttonTitle,
  disables,
  defaultData,
}) => {
  const SLAStateCitiesFormSchema =
    SLAStateCitiesFormSchemaGenerator(isMultiSelect);
  const {
    handleSubmit,
    control,
    formState: { errors },
    setValue,
  } = useForm({
    mode: "onTouched",
    resolver: yupResolver(SLAStateCitiesFormSchema),
    defaultValues: {
      ...defaultData,
      isActive: defaultData ? defaultData.isActive : true,
      slA_CitiesType: defaultData ? defaultData.slA_CitiesType : false,
    },
  });

  const slAGroupIDRef = useRef<null | any>(null);
  const zoneIDsRef = useRef<null | any>(null);
  const slA_SourceStateIDsRef = useRef<null | any>(null);
  const slA_SourceCityIDsRef = useRef<null | any>(null);
  const slA_DestStateIDsRef = useRef<null | any>(null);
  const slA_DestCityIDsRef = useRef<null | any>(null);
  const [selectedSLAGroupID, setSelectedSLAGroupID] = useState(1);
  const [selectedSrcStateID, setSelectedSrcStateID] = useState([
    {
      stateID: 0,
    },
  ]);
  const [selectedDesStateID, setSelectedDesStateID] = useState([
    {
      stateID: 0,
    },
  ]);
  const {
    data: basicPriceNameListData,
    isLoading: basicPriceNameListDataLoading,
  }: OutputUseQueryType<SLAListOutputType> = useQueryRequest({
    queryFn: getBasicPriceNameList,
    queryKey: "get-basic-price-name-List",
    data: {
      companyID: 1,
    },
  });

  const {
    data: slaZonesListData,
    isLoading: slaZonesListDataLoading,
  }: OutputUseQueryType<GetSLAZonesOutputType> = useQueryRequest({
    queryFn: getZonesList,
    queryKey: "get-sla-zones",
    data: {
      companyID: 1,
      slA_GroupID: defaultData
        ? (defaultData.slA_GroupID as { slA_GroupID: number }).slA_GroupID
        : selectedSLAGroupID,
    },
  });

  const {
    data: states,
    isLoading: statesLoading,
  }: OutputUseQueryType<StatesOutputType> = useQueryRequest({
    queryFn: getALLStates,
    queryKey: "get-states",
    data: {
      stateID: 0,
    },
  });

  const {
    data: srcCities,
    isLoading: srcCitiesLoading,
  }: OutputUseQueryType<CitiesOutputType> = useQueryRequest({
    queryFn: getCitiesByState,
    queryKey: "get-src-cities",
    data:
      defaultData && selectedSrcStateID[0].stateID === 0
        ? {
            stateIDs: [
              {
                stateID: (defaultData?.slA_SourceStateIDs as StatesType)
                  .stateID,
              },
            ],
          }
        : { stateIDs: selectedSrcStateID },
  });

  const {
    data: desCities,
    isLoading: desCitiesLoading,
  }: OutputUseQueryType<CitiesOutputType> = useQueryRequest({
    queryFn: getCitiesByState,
    queryKey: "get-des-cities",
    data:
      defaultData && selectedDesStateID[0].stateID === 0
        ? {
            stateIDs: [
              {
                stateID: (defaultData?.slA_SourceStateIDs as StatesType)
                  .stateID,
              },
            ],
          }
        : { stateIDs: selectedDesStateID },
  });

  const emptyInputsHandler = () => {
    if (!defaultData) {
      slAGroupIDRef.current!.setValue({});
      zoneIDsRef.current!.setValue([]);
      slA_SourceStateIDsRef.current!.setValue([]);
      slA_SourceCityIDsRef.current!.setValue([]);
      slA_DestStateIDsRef.current!.setValue([]);
      slA_DestCityIDsRef.current!.setValue([]);
      setValue("isActive", true);
      setValue("slA_CitiesType", false);
    }
  };

  return (
    <form
      className="w-full flex flex-col gap-4"
      onSubmit={handleSubmit((data) => {
        submitHandler(data);
        emptyInputsHandler();
      })}
    >
      <Grid container spacing={4}>
        <Grid item xs={12} md={6}>
          <Controller
            name="slA_GroupID"
            control={control}
            render={({ field }) => (
              <SelectField
                selectRef={slAGroupIDRef}
                isLoading={basicPriceNameListDataLoading}
                {...field}
                onChange={(val: SLAListRowDataType) => {
                  field.onChange(val);
                  setSelectedSLAGroupID(val.slA_GroupID);
                }}
                options={basicPriceNameListData && basicPriceNameListData.data}
                label="سرگروه SLA"
                error={errors.slA_GroupID?.message}
                getOptionLabel={(option: SLAListRowDataType) =>
                  option.slA_GroupName
                }
                getOptionValue={(option: SLAListRowDataType) =>
                  option.slA_GroupID
                }
                isRequired={true}
                defaultValue={defaultData?.slA_GroupID}
                disabled={!!defaultData}
              />
            )}
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <Controller
            name="zoneIDs"
            control={control}
            render={({ field }) => (
              <SelectField
                selectRef={zoneIDsRef}
                isLoading={slaZonesListDataLoading}
                {...field}
                onChange={(val: SLAZonesType[]) => {
                  field.onChange(val);
                }}
                options={slaZonesListData && slaZonesListData.data}
                label="زون (ناحیه)"
                error={errors.zoneIDs?.message}
                getOptionLabel={(option: SLAZonesType) => option.zoneName}
                getOptionValue={(option: SLAZonesType) => option.zoneID}
                isRequired={true}
                isMultiSelect={isMultiSelect}
                defaultValue={defaultData?.zoneIDs}
              />
            )}
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <Controller
            name="slA_SourceStateIDs"
            control={control}
            render={({ field }) => (
              <SelectField
                selectRef={slA_SourceStateIDsRef}
                isLoading={statesLoading}
                {...field}
                onChange={(val: StatesType) => {
                  field.onChange(val);
                  const selected = Array.isArray(val)
                    ? val.map((item) => {
                        return { stateID: item.stateID };
                      })
                    : [{ stateID: val.stateID }];

                  setSelectedSrcStateID(selected);
                  defaultData && slA_SourceCityIDsRef.current!.setValue([]);
                }}
                options={states && states.data}
                label="استان مبدا:"
                error={errors.slA_SourceStateIDs?.message}
                getOptionLabel={(option: StatesType) => option.statePName}
                getOptionValue={(option: StatesType) => option.stateID}
                isRequired={true}
                isMultiSelect={isMultiSelect}
                defaultValue={defaultData?.slA_SourceStateIDs}
              />
            )}
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <Controller
            name="slA_SourceCityIDs"
            control={control}
            render={({ field }) => (
              <SelectField
                selectRef={slA_SourceCityIDsRef}
                isLoading={srcCitiesLoading}
                {...field}
                onChange={(val: CitiesType) => {
                  field.onChange(val);
                }}
                options={srcCities && srcCities.data}
                label="شهر مبدا:"
                error={errors.slA_SourceCityIDs?.message}
                getOptionLabel={(option: CitiesType) => option.cityPName}
                getOptionValue={(option: CitiesType) => option.cityID}
                isRequired={true}
                isMultiSelect={isMultiSelect}
                defaultValue={defaultData?.slA_SourceCityIDs}
              />
            )}
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <Controller
            name="slA_DestStateIDs"
            control={control}
            render={({ field }) => (
              <SelectField
                selectRef={slA_DestStateIDsRef}
                isLoading={statesLoading}
                {...field}
                onChange={(val: StatesType) => {
                  field.onChange(val);
                  const selected = Array.isArray(val)
                    ? val.map((item) => {
                        return { stateID: item.stateID };
                      })
                    : [{ stateID: val.stateID }];
                  setSelectedDesStateID(selected);
                  defaultData && slA_DestCityIDsRef.current!.setValue([]);
                }}
                options={states && states.data}
                label="استان مقصد:"
                error={errors.slA_DestStateIDs?.message}
                getOptionLabel={(option: StatesType) => option.statePName}
                getOptionValue={(option: StatesType) => option.stateID}
                isRequired={true}
                isMultiSelect={isMultiSelect}
                defaultValue={defaultData?.slA_DestStateIDs}
              />
            )}
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <Controller
            name="slA_DestCityIDs"
            control={control}
            render={({ field }) => (
              <SelectField
                selectRef={slA_DestCityIDsRef}
                isLoading={desCitiesLoading}
                {...field}
                onChange={(val: CitiesType) => {
                  field.onChange(val);
                }}
                options={desCities && desCities.data}
                label="شهر مقصد:"
                error={errors.slA_DestCityIDs?.message}
                getOptionLabel={(option: CitiesType) => option.cityPName}
                getOptionValue={(option: CitiesType) => option.cityID}
                isRequired={true}
                isMultiSelect={isMultiSelect}
                defaultValue={defaultData?.slA_DestCityIDs}
              />
            )}
          />
        </Grid>
        <Grid item xs={12}>
          <div className="h-full flex flex-col items-start justify-center mt-2">
            <Controller
              name="slA_CitiesType"
              control={control}
              render={({ field }) => (
                <CheckBox
                  id="slA_CitiesType"
                  name="slA_CitiesType"
                  value=""
                  label="مبادی و مقاصد انتخابی شامل مسیرهای SLA نباشند."
                  checked={field.value}
                  onChange={(val: React.ChangeEvent<HTMLInputElement>) => {
                    field.onChange(val);
                  }}
                />
              )}
            />
          </div>
        </Grid>
        <Grid item xs={12} sm={6} lg={2}>
          <div className="h-full flex flex-col items-start justify-center mt-2">
            <Controller
              name="isActive"
              control={control}
              render={({ field }) => (
                <CheckBox
                  id="isActive"
                  name="isActive"
                  value=""
                  label="فعال"
                  checked={field.value}
                  onChange={(val: React.ChangeEvent<HTMLInputElement>) => {
                    field.onChange(val);
                  }}
                />
              )}
            />
          </div>
        </Grid>

        <div className="flex justify-end p-4 w-full ">
          <Button
            type="submit"
            variant="contained"
            color="primary"
            disabled={disables}
          >
            {buttonTitle}
          </Button>
        </div>
      </Grid>
    </form>
  );
};
export default SLAStateCitiesForm;

```
and this is my yup schema:\