Вместо моего сообщения запускается другое сообщение проверки при использовании дизайна Ant getFieldDecorator

Я использую дизайн Ant, и это моя форма, когда я нажимаю кнопку «Сохранить», я получаю этот тип сообщения проверки вместо сообщения проверки Antd с красной рамкой.

Мне нужна такая ошибка проверки, которая показана в документах AntD. https://odesandbox.io/s/do52z

Я написал свою функцию вот так

      <Form  id="myForm" onSubmit={this.handleSubmit}>
          <Form.Item label="Code">
                      <CustomInput
                        form={this.props.form}
                        type="text"
                        disabled={this.state.disableFields}
                        name="code"
                        id="code"
                        placeholder=""
                        required={true}
                        errorMsg={"Please input code!"}
                      />
        </Form.Item>
   </Form>

Это мой пользовательский ввод

const CustomInput = ({
  form, id, name, placeholder, required, errorMsg, type, disabled,}: Props) => {
  return form.getFieldDecorator(id, {
    rules: [
      {
        required: required,
        message: errorMsg
      }
    ]
  })(
    <Input
      type={type}
      name={name}
      id={id}
      disabled={disabled}
      placeholder={placeholder}
      className={name === "code" ? "code-input" : "input-box"}
    />
  );
};

export default CustomInput;

и это моя кнопка сохранения

             <Button
                className="save-btn"
                htmlType="submit"
                form="myForm"
              >
                Save
              </Button>

Я думаю, что мне здесь чего-то не хватает. заранее спасибо