Typescript: how to create a sharable piece of form accepting a hookForm as prop

[johnyvelho]

Hey folks! So I have been trying to correct type a component which is a piece of a form (for reuse).
This is what it looks like now:

export interface AddressProps {
  hookForm: UseFormReturn<{ address: AddressInput }>;
}

export const Address: React.FC<AddressProps> = ({ hookForm }) => {
  const { t } = useTranslation();
  const handleOnAutoCompleteChange = (address) => {
    const setValueOptions = { shouldValidate: true };
    hookForm.setValue('address.line1', address.shortAddress, setValueOptions);
    hookForm.setValue('address.line2', address.street_number, setValueOptions);
    hookForm.setValue('address.country', address.country, setValueOptions);
    hookForm.setValue('address.state', address.state, setValueOptions);
    hookForm.setValue('address.city', address.city, setValueOptions);
    hookForm.setValue('address.postal_code', address.postalCode, setValueOptions);
  };
   ....
}

Types are working fine here in this component. The problem is where I am using it:

const schema = entitySchema
  .pick({
    political_exposure: true,
    criminal_record: true,
    address: true,
  })
  .required({ address: true });

export type SubmitInput = z.infer<typeof schema>;

const hookForm = useForm({
    resolver: zodResolver(schema),
    mode: 'onBlur',
    defaultValues, // type is SubmitInput
  });

<AddressForm hookForm={hookForm} />

I got the following type error on AddressForm:

Type 'UseFormReturn<{ address: { city: string; country: string; line1: string; line2: string; postal_code: string; state: string; }; political_exposure: boolean; criminal_record: boolean; }, { validateOnBlur: boolean; }>' is not assignable to type 'UseFormReturn<{ address: { city: string; country: string; line1: string; line2: string; postal_code: string; state: string; }; }, any>'.
  Types of property 'watch' are incompatible.
    Type 'UseFormWatch<{ address: { city: string; country: string; line1: string; line2: string; postal_code: string; state: string; }; political_exposure: boolean; criminal_record: boolean; }>' is not assignable to type 'UseFormWatch<{ address: { city: string; country: string; line1: string; line2: string; postal_code: string; state: string; }; }>'.
      Types of parameters 'callback' and 'callback' are incompatible.
        Types of parameters 'info' and 'info' are incompatible.
          Type '{ name?: "address" | "political_exposure" | "criminal_record" | "address.city" | "address.country" | "address.line1" | "address.line2" | "address.postal_code" | "address.state" | undefined; type?: EventType | undefined; value?: unknown; }' is not assignable to type '{ name?: "address" | "address.city" | "address.country" | "address.line1" | "address.line2" | "address.postal_code" | "address.state" | undefined; type?: EventType | undefined; value?: unknown; }'.
            Types of property 'name' are incompatible.
              Type '"address" | "political_exposure" | "criminal_record" | "address.city" | "address.country" | "address.line1" | "address.line2" | "address.postal_code" | "address.state" | undefined' is not assignable to type '"address" | "address.city" | "address.country" | "address.line1" | "address.line2" | "address.postal_code" | "address.state" | undefined'.
                Type '"political_exposure"' is not assignable to type '"address" | "address.city" | "address.country" | "address.line1" | "address.line2" | "address.postal_code" | "address.state" | undefined'.ts(2322)
index.tsx(11, 3): The expected type comes from property 'hookForm' which is declared here on type 'IntrinsicAttributes & AddressProps'

The error is because I have the extra properties (political_exposure: true, criminal_record: true). I couldn't find a way to make the UseFormReturn accepts extra properties. eg [x: string]: any, didn't help.

For now I endup using the component like this:
<AddressForm hookForm={hookForm as any} />
which is bad, but I couldn't type it correctly.

How could I solve it?
Am I thinking in the wrong way? is there a better way to do something like this?

Thank you <3