React TypeScript reacthookform 字符串类型的参数不可分配给类型的参数

收到错误:

TS2345: Argument of type 'string' is not assignable to parameter of type '"firstName" | "lastName" | "email" | "password" | "location"'.

父零部件:

<InputElement
  id="First Name"
  name="firstName"
  type="text"
  label="First Name"
  register={register}
  rules={{ required: "First name is required." }}
  error={errors.firstName}
 />

子InputElement组件:

import { InputHTMLAttributes } from "react";
import { UseFormRegister, FieldError, FieldValues } from "react-hook-form";

interface SignUpFields {
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  location: string;
}

interface InputElementProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  labelClasses?: string;
  register: UseFormRegister<SignUpFields>;
  rules: FieldValues;
  error?: FieldError;
}

export function InputElement({
  label,
  labelClasses,
  register,
  rules,
  error,
  ...props
}: InputElementProps) {
  const name = { ...props }["name"];
  console.log(name); // This properly console logs "firstName"

  return (
    <div className="mt-6">
      {label && (
        <label
          htmlFor={{ ...props }["id"]}
          className={`block text-primary text-sm font-medium font-montserrat leading-6 ${labelClasses}`}
        >
          {label}
        </label>
      )}
      <input
        {...props}
        {...register(name, rules)}
        className="mt-2 mb-1 bg-transparent active:bg-transparen focus:bg-transparent block w-full rounded-xl   border-2 border-primary px-4 py-2 font-montserrat text-lg text-white placeholder:text-white sm:text-sm sm:leading-6"
      />
      {error && (
        <p className="text-white text-xs font-montserrat mt-1 italic">
          {error.message}
        </p>
      )}
    </div>
  );
}

错误在此行上，名称为:

{...register(name, rules)}

如果我手动添加字符串:

{...register("firstName", rules)}

它工作得很好，但我在一个表单中多次使用这个组件，所以它需要是动态的.

这是我的第一个打字作业(job)，这个错误令人困惑，我似乎找不到与我类似的问题.

如有任何帮助/建议，我们将不胜感激.