与自定义输入的反应钩形式 - 验证不起作用

Question

我正在尝试使我的自定义组件与React-Hook-Form一起使用，并使用打字稿（React-Hook-Form 7.31.1，React V 18.0.6，TS 4.6.3）。问题是我所期望的不是FormState的价值。

这是我的代码：

app.tsx

import { Controller, useForm } from "react-hook-form";
import InputTest from "./components/forms/input/InputTest";

function App() {
  const { handleSubmit, formState, control } = useForm({
    mode: "onChange",
  });

  const onChangeHandler = (data: any) => {
    console.log(formState.errors);
  };

  const onSubmit = (data: any) => {
    console.log("submitting...", data);
    console.log("errors...", formState.errors);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          control={control}
          name="testinput"
          rules={{ required: true, minLength: 5 }}
          render={({ field: { onChange, onBlur, value, ref } }) => (
            <InputTest
              label="testing"
              id="123"
              value={value}
              onChange={(e) => {
                onChangeHandler(e);
                onChange(e);
              }}
            ></InputTest>
          )}
        />
        <input type="submit" />
      </form>
    </div>
  );
}

export default App;

inputtest.tsx

import React, { ChangeEvent } from "react";

type inputTestProps = {
  value: string;
  label: string;
  id: string;
  /** Function executed when input value changes*/
  onChange?: (ev: ChangeEvent<HTMLInputElement>) => void;
};

const InputTest: React.FC<inputTestProps> = (props) => {
  const onChangeHandler = (ev: ChangeEvent<HTMLInputElement>) => {
    if (props.onChange) props.onChange(ev);
  };
  return (
    <>
      <label htmlFor={props.id}>{props.label}</label>
      <input id={props.id} onChange={onChangeHandler} />
    </>
  );
};

export default InputTest;

问题是，每次我登录formState.Errors onChangeHandler，几乎每次都不是我期望的。有时它会记录

{}

有时会记录

{testinput: {…}}[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

，有时它会记录我

testinput:
message: ""
ref: {name: 'testinput'}
type: "minLength"
[[Prototype]]: Object

我缺少一些东西吗？我正在使用错误吗？ （使用简单的输入，我可以使其轻松工作，但不能使用自定义组件）