为什么反应钩子形式输入中的第一个字母是死的

我需要帮助来理解为什么简单输入组件中的第一个字母没有注册。

我从示例中创建了一个简单的受控输入，但它无法正常工作。

我为你创建了一个例子https://stackblitz.com/edit/react-9zezqx https://stackblitz.com/edit/react-9zezqx

const App = () => {

const { register, handleSubmit, watch, errors, reset, control, formState } = useForm({ mode: 'onChange' });

console.log(errors)
    return (
      <div>
        <form onSubmit={handleSubmit(() => console.log("submit"))}>
            <Controller
                as={TextInput}
                name="firstname"
                defaultValue=""
                control={control}
                inputRef={register({ required: true, minLength: 8 })}
                hasErrors={errors.firstname !== undefined}
            />
            <br/>
            <Controller
                as={TextInput}
                name="hobby"
                defaultValue=""
                control={control}
                inputRef={register({ required: true, minLength: 8 })}
                hasErrors={errors.hobby !== undefined}
            />
            </form>
      </div>
    );

}

render(<App />, document.getElementById('root'));



import * as React from 'react';

export const TextInput = (props) => {
  return(
    <>
    <input    
      type="text"
      name={props.name}
      value={props.value}
      onChange={props.onChange}
      ref={props.inputRef}
     />
     {props.hasErrors && (<h2>errors!!</h2>)}
     </>
  )
}

好吧，我也在“onBlur”中发现了导致它的错误

reValidateMode: 'onBlur'