When I send {...register(name)} to my input component with the hook form, it gets an error, but when I send it as {...register("fullname")} it does not get an error. I can't use something like ("fullname") because I'm sending it using the map function.

register.tsx

import { Form, Input, PrimaryButton } from "components";

import { LoginRegisterLayout } from "layouts";

import { formTypes } from "constants/layouts/loginRegisterLayout";
import { getFormFields } from "constants/pages/register";
import { FormFieldType } from "utils/formFieldType";

import { useForm, SubmitHandler } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

type Inputs = {
  fullname: string;
  email: string;
  password: string;
  passwordConfirmation: string;
};

const Register = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = data => console.log(data);

  return (
    <LoginRegisterLayout formType={formTypes.REGISTER} headTitle="Register">
      <form onSubmit={handleSubmit(onSubmit)}>
        <>
          {getFormFields.map(
            (
              {
                id,
                name,
                label,
                placeholder,
                type,
                passwordField,
              }: FormFieldType,
              index: number
            ) => (
              <Input
                {...register(name)}
                label={label}
                id={id}
                name={name}
                key={index}
                placeholder={placeholder}
                type={type}
                passwordField={passwordField}
              />
            )
          )}

          <PrimaryButton size="xl" disabled={false}>
            Confirmation
          </PrimaryButton>
        </>
      </form>
    </LoginRegisterLayout>
  );
};

export default Register;

I've attached the error I got as a picture below.