TypeError with the control object

[WangHansen]

Got:

Type 'Control<{ email: string; password: string; }, any>' is not assignable to type 'Control<{ email: string; password: string; }>'.
  Types of property '_updateFieldArray' are incompatible.
    Type 'import("/xxx/node_modules/react-hook-form/dist/types/form").BatchFieldArrayUpdate' is not assignable to type 'import("/xxx/node_modules/react-hook-form/dist/types/form").BatchFieldArrayUpdate'.
      Types of parameters 'updatedFieldArrayValues' and 'updatedFieldArrayValues' are incompatible.
        Type 'Partial<FieldArray<TFieldValues, TFieldArrayName>>[] | undefined' is not assignable to type 'Partial<FieldArray<TFieldValues, ArrayPath<TFieldValues>>>[] | undefined'.
          Type 'Partial<FieldArray<TFieldValues, TFieldArrayName>>[]' is not assignable to type 'Partial<FieldArray<TFieldValues, ArrayPath<TFieldValues>>>[]'.
            Type 'Partial<FieldArray<TFieldValues, TFieldArrayName>>' is not assignable to type 'Partial<FieldArray<TFieldValues, ArrayPath<TFieldValues>>>'.
              Type 'keyof FieldArray<TFieldValues, ArrayPath<TFieldValues>>' is not assignable to type 'keyof FieldArray<TFieldValues, TFieldArrayName>'.
                Type 'string | number | symbol' is not assignable to type 'keyof FieldArray<TFieldValues, TFieldArrayName>'.
                  Type 'string' is not assignable to type 'keyof FieldArray<TFieldValues, TFieldArrayName>'.
                    Type 'string' is not assignable to type 'never'.
                      Type 'keyof FieldArray<TFieldValues, ArrayPath<TFieldValues>>' is not assignable to type 'never'.
                        Type 'string | number | symbol' is not assignable to type 'never'.
                          Type 'string' is not assignable to type 'never'.ts(2322)

Code:

const schema = zod.object({
  email: zod.string().email().min(1),
  password: zod
    .string()
    .regex(/^(?=.*[A-Z])(?=.*[a-z])(?=.*d).+$/)
    .min(8),
});

export default function Login() {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useRemixForm<zod.infer<typeof schema>>({
    mode: "onSubmit",
    resolver: zodResolver(schema),
  });

  return (
    <div>
      <Form onSubmit={handleSubmit} method="POST">
        <FormField
          control={control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="shadcn" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </Form>
    </div>
  );
}

[Sutikshan]

you may need to utilise RemixFormProvider .
example impl https://github.com/Sutikshan/tess-fs/blob/main/web/app/routes/provider.organization.tsx#L112