<ArrayInput> with <SimpleFormIterator> of React Admin generate wrong output - react-admin

Question

For the following:
<ArrayInput source="slotCaps" label="Schedule Caps">
<SimpleFormIterator>
<Box display="flex">
<Box mr="0.5em">
<NumberInput source="cap" step={1}/>
</Box>
<Box ml="0.5em">
<SelectInput
source="period"
choices={[
{id: "0", name: "Day"},
{id: "1", name: "Week"},
{id: "2", name: "Month"}
]}
/>
</Box>
</Box>
</SimpleFormIterator>
</ArrayInput>
I get:
{
"name": "test 5",
"description": "test 5",
"slotCaps": [
{},
{}
],
"cap": 1,
"period": "0"
}
I was expecting:
{
"name": "test 5",
"description": "test 5",
"slotCaps": [
{"cap": 1, "period": "0"},
],
}
Any idea what I am doing wrong? Could someone please explain what I have to change to obtain the second variant?
Thank you.
Edit
Not sure why but for some reason this works:
<ArrayInput source="slotCaps" label="Schedule Caps">
<SimpleFormIterator>
<NumberInput source="cap" step={1}/>
<SelectInput
source="period"
choices={[
{id: 1, name: "Day"},
{id: 2, name: "Week"},
{id: 3, name: "Month"}
]}
optionValue={"name"}
/>
</SimpleFormIterator>
</ArrayInput>
If anyone knows how to make the first variant work please provide your input. I need the fields to be formatted properly and it looks like using the Box element is the best way to achieve that.
Thank you.

Answer 1

Input components must be the first-level children of SimpleFormIterator, not nested ones.
If you wish to use nested Input components, which is useful for displaying the form properly with material-ui Box elements, you need to use a FormDataConsumer, like below:
<ArrayInput source="slotCaps" label="Schedule Caps">
<SimpleFormIterator>
<FormDataConsumer>
{({ getSource, scopedFormData }) => {
return (
<Box display="flex">
<Box mr="0.5em">
<NumberInput
source={getSource("cap")}
record={scopedFormData}
step={1}
/>
</Box>
<Box ml="0.5em">
<SelectInput
source={getSource("period")}
record={scopedFormData}
choices={[
{ id: "0", name: "Day" },
{ id: "1", name: "Week" },
{ id: "2", name: "Month" },
]}
/>
</Box>
</Box>
);
}}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
Then, for each Input component, all you need to do is add getSource in the source prop and scopedFormData to the record prop.

Answer 2

remove source from NumberInput and SelectInput