get a warning when use rc-form-hooks

[FurryWolfX]

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

function RcForm() {
  const { getFieldDecorator, validateFields, errors, values } = useForm<{
    username: string;
  }>();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    validateFields()
      .then(console.log)
      .catch(e => console.error(e.message));
  };

  return (
    <form onSubmit={handleSubmit}>
      {getFieldDecorator('username', {
        rules: [{ required: true, message: 'Please input username!' }]
      })(<input type='text' />)}
      <span style={{color: 'red'}}>{values.username}</span>
      {errors.username && <span style={{color: 'blue'}}>{errors.username[0].message}</span>}
      <button type={'submit'}>submit</button>
    </form>
  )
}