Union types with React Hook Form

I have a component that should be able to be reused for 2 or more forms. I pass down the setValue prop method from react-form-hook down to the component. I've tried typing it with an union type UseFormSetValue<FormAType | FormBType>.

But this makes TS complain on one of the components that either properties are not present in the other object.

Reproduction repo: https://stackblitz.com/edit/stackblitz-starters-meufv5?file=src%2FApp.tsx

Why is the union type not working like I would expect? Accept either A or B?

Is there a good workaround for this?

We need to define a union type of FormA and FormB as FormType. The setValue function is explicitly cast to UseFormSetValue<FormType> to match the updated FormType definition. This ensures that both FormA and FormB can be handled properly by the setValue function.

import Form from './Form';
import { useForm } from 'react-hook-form';
import { FormA, FormB } from './FormTypes';
import { UseFormSetValue } from 'react-hook-form/dist/types';
type FormType = FormA | FormB;
export default function App() {
  const { setValue } = useForm({
    defaultValues: { value: 'test' } as unknown as FormA,
  });
  return (
    <Form
      setValue={setValue as UseFormSetValue<FormType>}
      formObject={{ name: 'Jan', code: 10, key: 'string' }}
    />
  );
}