Как использовать React Hook Form с Typescript (входной компонент)

ОК, вот проблемы:

1. вам нужно добавить register к реквизитам в объявлении реквизитов входного компонента
2. вы должны использовать register, переданный в качестве опоры, а не новый, созданный с помощью useForm в компоненте ввода
3. в элементе ввода отсутствует атрибут имени

вот рабочий <Input> компонент с комментариями:

import React, { InputHTMLAttributes } from "react";
//import { useForm } from "react-hook-form"; // don't need the import

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  id: string;
  label: string;
  register: any; // declare register props
}

const Input: React.FC<InputProps> = ({ id, label, register, ...rest }) => {
  //const { register } = useForm(); // don't use a new `register`, use the one from props

  return (
    <div className="input-block">
      <label htmlFor={id}>{label}</label>
      <br />
      <br />
      {/* you must declare the `name` attribute on the input element */}
      <input name={id} type="text" id={id} ref={register} {...rest} />
    </div>
  );
};

export default Input;

Я нашел статью, которая помогла мне найти решение.

У Codebox есть подходящее решение для тех, кто хочет использовать компонентность машинописного текста с помощью React Hook Form.

https://codesandbox.io/s/react-hook-form-typescript-xnb1u