ArrayField - UX issue in validation error handling when only one Field has a validation error

[corovcam]

I would like to ask what is the reason behind the hasGroupErrors method in ArrayField:

react-invenio-forms/src/lib/forms/ArrayField.js

Lines 27 to 35 in 016b12b

	hasGroupErrors = (errors) => {
	const { fieldPath } = this.props;
	for (const field in errors) {
	if (field.startsWith(fieldPath)) {
	return true;
	}
	}
	return false;
	};

react-invenio-forms/src/lib/forms/ArrayField.js

Lines 88 to 92 in 016b12b

	const hasError = this.hasGroupErrors(errors) ? { error: {} } : {};
	const { nextKey } = this.state;
	const valuesToDisplay = this.getValues(values, fieldPath);
	return (
	<Form.Field {...uiProps} {...hasError}>

What I don't understand is why there is an error object hasError that gets propagated down to SUI's Form.Field component. The UX problem I'm encountering here is if there is only one error in any field of the ArrayField, the whole ArrayField turns red (since empty error object in hasError is truthy in SUI's Form.Field props), and not just the specific Field with an error I would expect to be highlighted as red/error-y.

I would expect this outcome:

Also, related to this empty error object, there's React warning in the console: