Question: React Hook Form Error on custom Input component

I am having a problem when I use react hook form + zod in my application, in short the inputs never change value and I get the following error in the console:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

my components:
// Login.tsx

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

import { Button } from "../components/Form/Button";
import { Input } from "../components/Form/Input";

const loginFormValidationSchema = z.object({
  username: z.string().min(3),
  password: z.string().min(3)
});

type LoginFormFields = z.infer<typeof loginFormValidationSchema>;

export function Login() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm<LoginFormFields>({
    resolver: zodResolver(loginFormValidationSchema)
  });

  function handleSignIn(data: LoginFormFields) {
    console.log(data);
  }

  return (
    <section>
      <h1>Login</h1>

      <form onSubmit={handleSubmit(handleSignIn)}>
        <Input
          type="text"
          error={errors.username?.message}
          autoComplete="off"
          {...register("username")}
        />

        <Input
          type="password"
          label="Senha"
          error={errors.password?.message}
          {...register("password")}
        />

        <Button type="submit" disabled={isSubmitting}>
          Entrar
        </Button>
      </form>
    </section>
  );
}

// Input.tsx

import { InputHTMLAttributes } from "react";

import styles from "./Input.module.css";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  name: string;
  label?: string;
  error?: string;
}

export function Input({ name, label, error, ...props }: InputProps) {
  return (
    <div className={styles.wrapper}>
      {!!label && (
        <label htmlFor={name} className={styles.label}>
          {label}
        </label>
      )}

      <input id={name} name={name} className={styles.input} {...props} />

      {!!error && <p className={styles.error}>{error}</p>}
    </div>
  );
}

I have tried some alternatives that I found in some threads, but so far I have not been successful, has anyone experienced at least or has any notion of how it is possible to get around this error?


Answer:
I think what's happening is the {...register("username")}, which gets picked up as ...props in the Input component's props, is using a ref under the hood (this is how the react-hook-form library identifies inputs). You should be able to fix this by converting the Input component to use a forwardRef like this:
export const Input = React.forwardRef<HTMLInputElement, Omit<InputProps, "ref">>(({ name, label, error, ...props }, ref) => (
    <div className={styles.wrapper}>
      {!!label && (
        <label htmlFor={name} className={styles.label}>
          {label}
        </label>
      )}

      <input id={name} name={name} className={styles.input} ref={ref} {...props} />

      {!!error && <p className={styles.error}>{error}</p>}
    </div>
));

Input.displayName = "Input";

Basically what this does is it allows you to put a ref attribute on the Input component, which gets 'forwarded' to the input component. This allows the library to monitor changes.