I have a form created with antd. I have some custom fields that I use in Form.Item as a child. The problem is when I submit the form, the field has an error and the message is shown by Form.Item. But I can pass the error to my custom field to change the border color.

I tried to pass the error using form.getFieldError(), in which the form is a form instance. But it returns an empty array and only when I change a state the array will find value.

How can I pass the error to my element instantly as the message shows?

this is the code I'm using and the image below it is the result at submit.

<Form.Item
     label="Origin Country"
     name="From"
     className="flex-1"
     rules={[{ required: true }]}
     initialValue={initialValue?.initialOriginCountry?.name}
>
     <SearchSelectCountry
         minLetter={1}
         placeholder="Origin Country"
         onSearch={(values) => onCountriesSearch(values, 'origin')}
         options={originCountries}
         onChange={(value) => handleChangeOriginContry(value)}
         initialValue={originSelectedCountry}
         error={form.getFieldError('From')?.length > 0}
      />
</Form.Item>

And this is when I change a state and the array fills up and error passes down to the child and the border color changes: