How to type the methods of useRemixForm() when passing to a child component?

[AndresDJonge]

Discussed in #133

^{Originally posted by AndresDJonge December 6, 2024}
Hi all! I've got an issue with TypeScript when I'm trying to pass the form to a child component. I remember I could do this without a problem with the regular react-hook-form but now I've got this problems. Let's take an example:

enum Action {
    POST = 'post',
}

const loginFormSchema = z
    .object({
        action: z.literal(Action.POST),
        email: z.string().email('Email is required'),
        password: z.string().min(1, 'Password is required'),
    })
    .strict();

const loginSchema = z.discriminatedUnion('action', [loginFormSchema]);

function Home() {
  const loginForm = useRemixForm<z.infer<typeof loginSchema>>({
        resolver: zodResolver(loginSchema),
        defaultValues: {
            action: Action.POST,
        },
        submitConfig: {
            method: 'POST',
        },
    });
    
    return (
      <Child form={loginForm}> // TS Error
    )
}

interface ChildProps {
  form: UseRemixFormReturn;
}

function Child({form}: ChildProps) {
  ...
}

The TS Error I get is: Types of property register are incompatible. Type '(name: "action" | "email" | "password", options?: (RegisterOptions<{ action: Action; email: string; password: string; }> & { disableProgressiveEnhancement?: boolean | undefined; }) | undefined) => { ...; }' is not assignable to type '(name: string, options?: (RegisterOptions<FieldValues> & { disableProgressiveEnhancement?: boolean | undefined; }) | undefined) => { defaultValue?: string | undefined; ... 11 more ...; disabled?: boolean | undefined; }'. Types of parameters name and name are incompatible. Type string is not assignable to type 'action' | 'email' | 'password'