Capture FormItem rules error with custom Input

Question

I have a form where I use custom inputs with the following structure:

Form (antd) component:

<Form form={form} ...>
   <TextField
      defaultValue="user1234"
      label="Username"
      name="username"
      rules={[{ required: true, message: "The username is required!" }]}
   />
   <TextField
      defaultValue="[email protected]"
      label="Email"
      name="mail"
      rules={[{ required: true, message: "The email is required!" }]}
   />
   <Button htmlType="submit">
</Form>

TextField (custom) component:

<Form.Item name={name} rules={rules}>
   <div>
     <label className={FORM_ITEM_ERROR ? "textfield-error" : ""}>
       <input
         type="text"
         defaultValue={defaultValue}
         value={value}
         onChange={onChange}
       />
       <span>{label}</span>
     </label>
   </div>
</Form.Item>

I need to know when there is an error in the FormItem inside the TextField component. Any solution?