CheckboxGroupInput doesn't display error in red when wrapped in a ReferenceArrayInput

[sylvaindubus]

What you were expecting:
I am expecting the label and the error message to be in red if there is an an error.

What happened instead:
Both label and error message remain grey, which makes error spotting more complicated.

Steps to reproduce:
Simply wrap a <CheckboxGroupInput> element into a <ReferenceArrayInput> element, as follows:

<ReferenceArrayInput source="roomsIds" resource="RoomOffer" reference="Room" helperText="Test">
  <CheckboxGroupInput label="My label" validate={required()} />
</ReferenceArrayInput>

Here is the problem:

Explanations:
It seems the element is passing an error props to all children element. As it is not sanitized in <CheckboxGroupInput> element, it will remains always at null for the <FormControl> element.

Current workaround:
My workaround is to sanitize props passed to <CheckboxGroupInput>, by creating a new component and simply removing the error prop:

const SanitizedCheckboxGroupInput = props => {
  const { error, ...rest } = props
  return <CheckboxGroupInput {...rest} />
}

Environment

• React-admin version: 3.11.1
• React version: 17.0.1
• Browser: any

[djhi]

Reproduced. Thanks for the report