I am using an antd text area in reactjs, and have some predefined rules as :

    const validationRules = [
        {
            required: true,
            message: 'Required',
        },
        {
            min: MIN_LENGTH,
            message: `min ${MIN_LENGTH} characters required`,
        },
    ];

Form Item is as follows:

<Form.Item name="myField" rules={validationRules}>
  <TextArea
    className="mt-32"   
    rows={6}
    placeholder={`Your answer should be between ${MIN_LENGTH} to ${MAX_LENGTH} characters`}
    minLength={MIN_LENGTH}
    maxLength={MAX_LENGTH}
    value={value}
  />
</Form.Item>;

Now want to add a custom validation rule i.e. to warn user if he enters more than 2 tailing spaces.
For this I have created a custom validator as:

async function validateEmptySpaces(rule: any, inputValue: string) {
  const trimmedValue = inputValue.trim();
  const diffInLength = inputValue.length - trimmedValue.length;
  if (diffInLength > 1) {
    throw new Error("remove empty spaces");
  }
}

So I add this validator to mu rules at the end as :

const validationRules = [
  {
    required: true,
    message: "Required",
  },
  {
    min: MIN_LENGTH,
    message: `min ${MIN_LENGTH} characters required`,
  },
  { validator: validateEmptySpaces },
];

Now this is How I get to see in UI

Here instead of 1 error at a time, it shows both the errors. How can I make it show only one error message at once like: