What can be the type of name for useWatch hook

[Junaid300]

I have a form with 5 to 6 fields. If all field are field then i want to enable the Create Profile button and vice verssa. For this i decided to make a common component pass control and name a props but i am getting error for name
Here is error:

No overload matches this call.
  Overload 1 of 4, '(props: { defaultValue?: DeepPartialSkipArrayKey<T> | undefined; control?: Control<T> | undefined; disabled?: boolean | undefined; exact?: boolean | undefined; }): DeepPartialSkipArrayKey<...>', gave the following error.
    Object literal may only specify known properties, and 'name' does not exist in type '{ defaultValue?: DeepPartialSkipArrayKey<T> | undefined; control?: Control<T> | undefined; disabled?: boolean | undefined; exact?: boolean | undefined; }'.
  Overload 2 of 4, '(props: { name: Path<T>; defaultValue?: PathValue<T, Path<T>> | undefined; control?: Control<T> | undefined; disabled?: boolean | undefined; exact?: boolean | undefined; }): PathValue<...>', gave the following error.
    Type 'FieldPath<T> | FieldPath<T>[]' is not assignable to type 'Path<T>'.
      Type 'FieldPath<T>[]' is not assignable to type 'Path<T>'.
  Overload 3 of 4, '(props: { name: readonly Path<T>[]; defaultValue?: DeepPartialSkipArrayKey<T> | undefined; control?: Control<T> | undefined; disabled?: boolean | undefined; exact?: boolean | undefined; }): readonly PathValue<...>[]', gave the following error.
    Type 'FieldPath<T> | FieldPath<T>[]' is not assignable to type 'readonly Path<T>[]'.
      Type 'FieldPath<T>' is not assignable to type 'readonly Path<T>[]'.
        Type 'string' is not assignable to type 'readonly Path<T>[]'.ts(2769)
      

My Component
import Button from '@/components/Button'
import { Control, FieldPath, FieldValues, useWatch } from 'react-hook-form'

export const CreateProfileButton = <T extends FieldValues>({ control, name }: { control: Control<T>; name: FieldPath<T> | FieldPath<T>[] }) => {
  const formValues = useWatch<T>({ control, name: name })
  const isButtonDisabled = formValues.every((value: string | boolean) => value)
  return (
    <Button disabled={!isButtonDisabled} type="submit" >
      Create Profile
    </Button>
  )
}

  <CreateProfileButton<SignUpFormType>
                  control={control}
                  name={['displayName', 'acceptTermPolicy', 'password', 'lastName', 'firstName', 'email', 'confirmPassword']}
                />

I will use CreateProfileButton for 4 to 5 more compoennts.
how can i give type to name ? or is there any better way?

[BrendanC23]

useWatch is typed like this:

export declare function useWatch<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: {
    name: TFieldName;
    defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
    control?: Control<TFieldValues>;
    disabled?: boolean;
    exact?: boolean;
}): FieldPathValue<TFieldValues, TFieldName>;

Does something like this work?

export const CreateProfileButton = <TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name }: { control: Control<TFieldValues>; name: TFieldName  }) => {
  const formValues = useWatch({ control, name })
  const isButtonDisabled = formValues.every((value: string | boolean) => value)
  return (
    <Button disabled={!isButtonDisabled} type="submit" >
      Create Profile
    </Button>
  )
}