Материал-вложенные сетки поля поля

Question

Я пытаюсь вложить сетку, используя material-ui <Grid>. Я читаю документацию и примеры, но не могу выполнить sh того, что хочу.

Я реализовал свой код следующим образом:

                                    <Grid container spacing={4}>
                                        <Grid
                                            item
                                            container
                                            xs={12}
                                            sm={6}
                                            spacing={4}
                                        >
                                            <Field
                                                name="documentNumber"
                                                label="Document Number"
                                                as={TextInput}
                                                error={
                                                    !!(
                                                        touched.documentNumber &&
                                                        errors.documentNumber
                                                    )
                                                }
                                                helperText={
                                                    touched.documentNumber &&
                                                    errors.documentNumber
                                                }
                                                variant="outlined"
                                                fullWidth
                                            />
                                            <Field
                                                name="expirationDate"
                                                label="Expiration date"
                                                component={DatePickerField}
                                                error={
                                                    !!(
                                                        touched.expirationDate &&
                                                        errors.expirationDate
                                                    )
                                                }
                                                helperText={
                                                    touched.expirationDate &&
                                                    errors.expirationDate
                                                }
                                                inputVariant="outlined"
                                                fullWidth
                                                InputProps={{
                                                    labelWidth: 110
                                                }}
                                                InputLabelProps={{
                                                    classes: {
                                                        root: classes.label
                                                    }
                                                }}
                                                openTo="year"
                                                disablePast
                                            />
                                        </Grid>
                                        <Grid item xs={12} sm={6}>
                                            <FileUpload
                                                setDocumentSent={
                                                    setDocumentSent
                                                }
                                            />
                                        </Grid>
                                    </Grid>

И вот результат:

или этот на рабочем столе:

Почему material-ui не добавляет поля между вложенными <Grid>, как это делается для двух сторонних <Grid>?

Ожидаемый результат должен быть равномерно распределенных сеток с одинаковыми полями.

Спасибо заранее

Редактировать: в моем коде произошла ошибка, я редактирую ее, но все еще не достигаю ожидаемого результата

Answer 1

Согласно @JoeLissner, у меня не должно быть <Grid>, являющегося Container и Item.

Итак, ниже мой код для тех, у кого есть тот же вопрос:

                            <Grid container spacing={4}>
                                <Grid item xs={12} sm={6}>
                                    <Grid container spacing={4}>
                                        <Grid item xs={12}>
                                            <Field
                                                name="documentNumber"
                                                label="Document Number"
                                                as={TextInput}
                                                error={
                                                    !!(
                                                        touched.documentNumber &&
                                                        errors.documentNumber
                                                    )
                                                }
                                                helperText={
                                                    touched.documentNumber &&
                                                    errors.documentNumber
                                                }
                                                variant="outlined"
                                                fullWidth
                                            />
                                        </Grid>
                                        <Grid item xs={12}>
                                            <Field
                                                name="expirationDate"
                                                label="Expiration date"
                                                component={
                                                    DatePickerField
                                                }
                                                error={
                                                    !!(
                                                        touched.expirationDate &&
                                                        errors.expirationDate
                                                    )
                                                }
                                                helperText={
                                                    touched.expirationDate &&
                                                    errors.expirationDate
                                                }
                                                inputVariant="outlined"
                                                fullWidth
                                                InputProps={{
                                                    labelWidth: 110
                                                }}
                                                InputLabelProps={{
                                                    classes: {
                                                        root:
                                                            classes.label
                                                    }
                                                }}
                                                openTo="year"
                                                disablePast
                                            />
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} sm={6}>
                                    <FileUpload
                                        setDocumentSent={
                                            setDocumentSent
                                        }
                                    />
                                </Grid>
                            </Grid>

А вот и рабочая песочница: https://codesandbox.io/s/adoring-dirac-co5ep