Wrapping Antd Input & Form.Item in another component not firing validation

Question

I am trying to wrap Antd Form <Form.Item> & Input in seperate TextBox component so I can add support for custom localization, But validation don't work if I add my custom component inside Antd Form. foe eg I want to create a TextBox component which render <Form.Item and Input itself

<Form
  name="basic"
  labelCol={{ span: 8 }}
  wrapperCol={{ span: 16 }}
  initialValues={{ remember: true }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  autoComplete="off"
>
  <TextBox
    label="Username"
    name="username"
    rules={[{ required: true, message: 'Please input your username!' }]}
  >
  </TextBox>

  <TextBox
    label="Password"
    name="password"
    rules={[{ required: true, message: 'Please input your password!' }]}
  >
    <Input.Password />
  </TextBox>

  <TextBox name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
    <Checkbox>Remember me</Checkbox>
  </TextBox>

  <TextBox wrapperCol={{ offset: 8, span: 16 }}>
    <Button type="primary" htmlType="submit">
      Submit
    </Button>
  </TextBox>
</Form>

Answer 1

It was very Stupid issue from my side I forgot to specify name on Input Field Which results in no validations