React hook form useController typescript type error

Question

Im trying to split the code in this example: https://codesandbox.io/s/usecontroller-0o8px

but Im getting a type error when Im passing control={control} to input component.

(JSX attribute) control?: Control<FieldValues, object> | undefined
Type 'Control<formValues, object>' is not assignable to type 'Control<FieldValues, object>'.
  The types of '_options.resolver' are incompatible between these types.
    Type 'Resolver<formValues, object> | undefined' is not assignable to type 'Resolver<FieldValues, object> | undefined'.
      Type 'Resolver<formValues, object>' is not assignable to type 'Resolver<FieldValues, object>'.ts(2322)
controller.d.ts(22, 5): The expected type comes from property 'control' which is declared here on type 'IntrinsicAttributes & { label?: string | undefined; supportive?: string | undefined; } & UseControllerProps<FieldValues, string> & InputHTMLAttributes<...> & { ...; }'

Here is my input component

type Props = {
  label?: string
  supportive?: string
} & UseControllerProps &
  InputHTMLAttributes<HTMLInputElement>

const InputComp: FC<Props> = ({ label, supportive, ...props }) => {

  ...

  const {
    field,
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields },
  } = useController(props)

  return <input {...field} />
}

when I pass formValues type to UseControllerProps<formValues> the error is gone.

I want to use the input component in different forms with different formValues How can I achieve that?

Answer 1

I had the same issue but I found this article and the guy solved this passing a T props that extends in a component

https://dev.to/texmeijin/component-design-idea-using-react-hook-form-v7-ie0