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?

React Hook Form Error on custom Input component
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.
