Value not updating for Input inside ANTD Form.Item

Question

sorry to ask this simple question but I'm new to React and I am trying to use the keyboard library from hodgef/react-simple-keyboard, along with Ant Design to try creating a login page. I pretty much followed the code sample from this Codesandbox Example and things works fine, until I replaced the default input tag into Ant-Design's Input component.

From this:

 <input
        id="firstName"
        value={getInputValue("firstName")}
        onFocus={() => setInputName("firstName")}
        placeholder={"First Name"}
        onChange={onChangeInput}
      />

Into this

<Form.Item
          label={<text style={{ color: 'white' }}>Username</text>}
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
          style={{ color: 'white' }}
        >
          <Input
            id="inputUserName"
            value={getInputValue('inputUserName')}
            onFocus={() => setInputName('inputUserName')}
            placeholder="User Name"
            onChange={onChangeInput}
          />
        </Form.Item>

After using Ant Design's Components, the input will not update anymore when I press the keyboard buttons.

Anyone in this community know what is the problem causing this? Is it because the <Input> is nested inside <Form.Item> , which made the ref not working anymore?

So if I were to use only input, without nested inside Form.Item it will still works:

    <Input
      id="inputUserName"
      value={getInputValue('inputUserName')}
      onFocus={() => setInputName('inputUserName')}
      placeholder="User Name"
      onChange={onChangeInput}
    />

Much appreciated if anyone could answer this stupid question, I'm really new and I don't even know what to search for to begin with, and really sorry for my poor English, I don't know how to explain or elaborate further.

Answer 1

Fixed by following this code sample from ANTD.

Basically I added following lines to call the form method.

const [form] = Form.useForm();

Then assigning the input values in the onChangeAll listener in the keyboard component as follows:

      const onChangeAll = (inputs) => {
        setInputs({ ...inputs });
        form.setFieldsValue({
          username: `${inputs.inputUserName}`,
          password: `${inputs.inputPassword}`,
    });
   };  

Also don't forgot to add this line in the Form component

  <Form
    form={form}
    ...
  >