Динамическое добавление материала-формы пользовательского интерфейса с избыточной формой в React

Question

Я пытаюсь динамически добавить коллекцию компонентов Material-UI с помощью FieldArray redux-form, чтобы компоненты были упорядочены в стиле строк, но вместо этого я получил их в стиле столбцов.

У меня есть:

const renderRows = ({ fields, meta: { error, submitFailed } }) => (
<React.Fragment>
    {fields.map((record, index) => (
        <div>
            <Grid item xs={4}>
                <Field name={`${record}.title`} component={renderField} type="text" label="Title" />
            </Grid>
            <Grid item xs={4}>
                <Field name={`${record}.artist`} component={renderField} type="text" label="Artist" />
            </Grid>
            <Grid item xs={2}>
                <Field name={`${record}.startdatetime`} component={renderField} type="datetime-local" />
            </Grid>
            <Grid item xs={2}>
                <Field name={`${record}.enddatetime`} component={renderField} type="datetime-local" />
            </Grid>
            <Button variant="contained" color="secondary" onClick={() => fields.remove(index)}>Delete</Button>
        </div>
    ))}
    <div>
        <Button variant="contained" color="primary" onClick={() => fields.push({})}>Add Record</Button>
    </div>
    {submitFailed && error && <span>{error}</span>}
</React.Fragment>

)

Который я называю так:

const FieldArraysForm = props => {
const { handleSubmit, pristine, reset, submitting } = props
return (
    <div>
        <Grid item xs={12} container spacing={8}>
            <FieldArray name="records" component={renderRows} />
        </Grid>
        <Button variant="contained" color="primary" disabled={submitting}>Submit</Button>
    </div>
);

}

И результат такой:

Примечание. Компонент renderField - это динамическое TextField, которое я здесь не указал.