Unable to bind a react-form-hook to custom component-CodePudding

I'm trying to bind a react-form-hook to a custom control(reactprime), but when I bind the control, it indicastes that:

Type 'Control<ConfigureData, any>' is not assignable to type 'Control<FieldValues, any>'.
  The types of '_options.resolver' are incompatible between these types.
    Type 'Resolver<ConfigureData, any> | undefined' is not assignable to type 'Resolver<FieldValues, any> | undefined'.
      Type 'Resolver<ConfigureData, any>' is not assignable to type 'Resolver<FieldValues, any>'.ts(2322)

ConfigureData is the type of my form.

Here is how I declared it:

type ConfigureData = {
  title: string;
  description: string;
  startHour: number;
  endHour: number;
  isWorkingMonday: boolean;
  isWorkingTuesday: boolean;
  isWorkingWednesday: boolean;
  isWorkingThursday: boolean;
  isWorkingFriday: boolean;
  isWorkingSaturday: boolean;
  isWorkingSunday: boolean;
};
const schema = yup
  .object({
    title: yup.string().required(),
    description: yup.string().required(),
  })
  .required();

  const {
    control,
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<ConfigureData>({ resolver: yupResolver(schema), defaultValues: { isWorkingMonday: true } });

and here is how I'm trying to use it:

 <Controller control={control} render={({ field, fieldState }) => <InputSwitch></InputSwitch>} />

But it doesn't let me assign control to the control prop. Not sure what I'm missing, I didn't find example of usages of the controller with a typed model?

If I remove all my generic types, it seems to work, but I would like to continue to use them.

CodePudding user response：

You can try

import { FieldValues } from 'react-hook-form';

const { control, register, handleSubmit, reset, formState: { errors }, } = useForm({ resolver: yupResolver(schema), defaultValues: { isWorkingMonday: true } }) as FieldValues ;