解释
我正在使用react-hook-form中的FormProvider创建一个动态输入表单。

const formMethods = useForm<TSongFormData>();
return (
    <FormProvider {...formMethods}>
       <SongInputForm />
    </FormProvider>
)

在SongInputForm组件中，我有我的实际表单，它将包含我为每个input elements创建的输入组件，如inputteaxtarea等...

const SongForm = () => {
  const { handleSubmit } = useFormContext<TSongFormData>();
  return (
        <form
          onSubmit={handleSubmit((data) => console.log("data", data))}
        >
          <InputElement label="Song Name" name="name" />
          <InputElement label="Author" name="author" />
          <input type="submit" />
        </form>
    );
  };
}

InputElement c组件将接收input元素本身的所有props，并且name属性将是表单数据的所有键的联合类型TSongFormDataKey。

interface ITextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  name: TSongFormDataKey;
}

const InputElement = ({ name, label, ...restProps }: ITextInputProps) => {
  const { register } = useFormContext<TSongFormData>();
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input id={name} {...restProps} {...register(name)} />
    </div>
  );
};

问题

到目前为止，我已经在InputElement组件中硬编码了TSongFormData和TSongFormDataKey类型。但是，我如何将TSongFormData和TSongFormDataKey类型作为泛型传递给InputElement组件，以便使其成为动态的，并在传递给它的属性类型上具有更大的灵活性呢？
我要找的是这样的东西：

interface ITextInputProps<T> extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  name: T;
}

const InputElement = <T,K>({ name, label, ...restProps }: ITextInputProps<T>) => {
  const { register } = useFormContext<K>();
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input id={name} {...restProps} {...register(name)} />
    </div>
  );
};

其中T将是TSongFormData且K将是TSongFormDataKey。
我已经创建了一个codesandbox，如果有人想玩它：https://codesandbox.io/s/elastic-sanne-uz3ei8
我是打字脚本的新手，试图让我的头围绕泛型，但发现它很难。
任何帮助将不胜感激。谢谢