Why doesn't validator work on antd form?

Question

JavaScript

Why doesn't the property work for generated form elements as ruleswell ? I am using . Here is the markup:normalize
antd

{
                    tags.map((tag, index) => (
                      <div key={index} className='tag-row'>
                        <div className='tag-row-top'>
                          <Item
                            className='input-item'
                            rules={getRule('Tag', 'key')}
                            normalize={v => v.trimStart()}
                          >
                            <Input
                              value={tag.key}
                              onChange={e => handleInputChange(e, index, 'key')}
                              placeholder='Enter key'
                            />
                          </Item>
                          <Item
                            className='input-item mg-l-12'
                            rules={getRule('Value', 'value')}
                            normalize={v => v.trimStart()}
                          >
                            <Input
                              value={tag.value}
                              onChange={e => handleInputChange(e, index, 'value')}
                              placeholder='Enter value'
                            />
                          </Item>
                          <Item
                            className='input-item mg-l-12'
                          >
                            <Button className='btn-remove-tag' sign='x' onClick={() => handleRemoveClick(index)} btnType='secondary' />
                          </Item>
                        </div>
                      </div>
                    ))
                  }

And here is the function getRules:

export const getRule = (label = '', name = '') => {
  const defaultRule = {
    required: true,
    message: `Please enter ${label.toLocaleLowerCase()}`,
  }
  switch (name) {
  case 'royality':
    return [{
      required: true,
      min: 0,
      max: 100,
      message: `Please enter ${label.toLocaleLowerCase()} between 0 and 100`,
    }]
  default:
    return [defaultRule]
  }
}