<ArrayInput> с <SimpleFormIterator>из React Admin генерирует неправильный вывод

Question

Для следующего:

<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>

Я получаю:

{
    "name": "test 5",
    "description": "test 5",
    "slotCaps": [
        {},
        {}
    ],
    "cap": 1,
    "period": "0"
}

Я ожидал:

{
    "name": "test 5",
    "description": "test 5",
    "slotCaps": [
        {"cap": 1, "period": "0"},
    ],
}

Есть идеи, что я делаю неправильно? Может кто-нибудь объяснить, что я должен изменить, чтобы получить второй вариант? Спасибо.

Редактировать

Не уверен, почему, но по какой-то причине это работает:

<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>

Если кто-нибудь знает, как сделать первый вариант работа, пожалуйста, предоставьте свой вклад. Мне нужно, чтобы поля были правильно отформатированы, и похоже, что использование элемента Box - лучший способ добиться этого.

Спасибо.