ref в react-hook-form

У меня есть кастомный хук, который получает ref на input, и на изменяемое значение из input. Пока я не использовал react-hook-form все было хорошо, ео при подключении данной библиотеки подключение ref не заладилось. Кто мог бы помочь. Вот родительский компонент:

const ModalEditCard = () => {

  const {
    register,
    watch,
    handleSubmit,
    formState: { errors }
  } = useForm<UserSubmitForm>({
    mode: "onChange"
  });

  const onSubmit: SubmitHandler<UserSubmitForm> = data => console.log(data);

  return (
    <form className="modal__form" onSubmit={handleSubmit(onSubmit)}>
      <div className="modal__body">
        <div className="modal__info">
          <TextAreaWithLimit
            register={register}
            watch={watch}
            errors={errors}
            id={"firstName"}
            placeholder={"Заголовок"}
            limit={50}
          />
          <TextAreaWithLimit
            register={register}
            watch={watch}
            errors={errors}
            id={"secondName"}
            placeholder={"Второй заголовок"}
            limit={20}
          />
        </div>
        <input type="submit" />
        <div className="modal__img">
          <img src={cardImg} alt="" />
        </div>
      </div>
    </form>
  );
};

Код компонента c input

const TextAreaWithLimit = ({ register, watch, errors, id, placeholder, limit }: TextAreaWithLimitProps) => {
  const valueField = watch(id) || "";

  return (
    <div className="modal__formItem">
      <textarea
        {...register(`${id}`, {
          required: {value: true, message: "Вобще не заполнено!"},
          maxLength: {value: limit, message: "Слишком много буков"},
        })}
        rows={1}
        className="modal__textArea"
        placeholder={placeholder}
      />
      <span className="modal__textArea-limit">{errors[id] ? errors[id]?.message : (limit - valueField.length)}</span>
    </div>
  );
};

Мне нужно получить ref input