Type error when passing in fetcher

[jam-fran]

I'm getting a type error when attempting to pass in a fetcher to my form configuration.

Here's a minimal reproduction:

import { zodResolver } from '@hookform/resolvers/zod'
import { useFetcher } from '@remix-run/react'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod'

const formSchema = z.object({
  username: z.string().min(3).max(20),
  password: z.string().min(8).max(100),
})

const resolver = zodResolver(formSchema)

export const ExampleForm = () => {
  const fetcher = useFetcher()
  const form = useRemixForm({
    resolver,
    defaultValues: {
      username: '',
      password: '',
    },
    fetcher,
  })

  return (
    <RemixFormProvider {...form}>
        ...
    </RemixFormProvider>
  )
}

And the type error I'm getting with the fetcher field in the hook is:

Type 'FetcherWithComponents<unknown>' is not assignable to type 'FetcherWithComponents<FieldValues> | undefined'.
  Type '{ state: "idle"; formMethod: undefined; formAction: undefined; formEncType: undefined; text: undefined; formData: undefined; json: undefined; data: unknown; } & { Form: ForwardRefExoticComponent<FetcherFormProps & RefAttributes<...>>; submit: FetcherSubmitFunction; load: (href: string) => void; }' is not assignable to type 'FetcherWithComponents<FieldValues> | undefined'.
    Type '{ state: "idle"; formMethod: undefined; formAction: undefined; formEncType: undefined; text: undefined; formData: undefined; json: undefined; data: unknown; } & { Form: ForwardRefExoticComponent<FetcherFormProps & RefAttributes<...>>; submit: FetcherSubmitFunction; load: (href: string) => void; }' is not assignable to type '{ state: "idle"; formMethod: undefined; formAction: undefined; formEncType: undefined; text: undefined; formData: undefined; json: undefined; data: FieldValues | undefined; } & { ...; }'.
      Type '{ state: "idle"; formMethod: undefined; formAction: undefined; formEncType: undefined; text: undefined; formData: undefined; json: undefined; data: unknown; } & { Form: ForwardRefExoticComponent<FetcherFormProps & RefAttributes<...>>; submit: FetcherSubmitFunction; load: (href: string) => void; }' is not assignable to type '{ state: "idle"; formMethod: undefined; formAction: undefined; formEncType: undefined; text: undefined; formData: undefined; json: undefined; data: FieldValues | undefined; }'.
        Types of property 'data' are incompatible.
          Type 'unknown' is not assignable to type 'FieldValues | undefined'.ts(2322)
index.d.ts(64, 5): The expected type comes from property 'fetcher' which is declared here on type 'UseRemixFormOptions<FieldValues>'

I've tried typing my fetcher more explicitly (via useFetcher<typeof action>()) with no luck. Any ideas or suggestions would be very much appreciated!

[AlemTuzlak]

will look into it soon!

[jam-fran]

Thanks @AlemTuzlak! Let me know if you need any more info or help. I'm using the latest version of both remix-hook-form (3.1.0) and react-hook-form (7.48.2).