I want to fix give material ui grid layout as per given img i have a problem coming in the third row

Question

I want a layout of grid using material - UI I want 3 row in the first row I want 5 text fields in the second row I want 5 input fields but in the third row I want only 2 input fields but I want that 2 input fields at the start as per above 2 rows as per img

In the third row only 2 input field will come below the second row's input field

 <Grid item xs={12} md={12} spacing={2} marginTop={"10px"}>

            <Grid border={"1px solid #ADADAD"} padding={2} spacing={4}>

              <Grid item xs={12} md={12} gap={3} display={'flex'} justifyContent={'center'}>

                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Item Code
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.item_code}
                        error={Boolean(errors.item_code)}
                        helperText={errors.item_code}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Item Name
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.item_code}
                        error={Boolean(errors.item_code)}
                        helperText={errors.item_code}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        RM Description
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.rm_description}
                        error={Boolean(errors.rm_description)}
                        helperText={errors.rm_description}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Purchase Type
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.purchase_type}
                        error={Boolean(errors.purchase_type)}
                        helperText={errors.purchase_type}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Inquiry Quantity
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.inquiry_qty}
                        error={Boolean(errors.inquiry_qty)}
                        helperText={errors.inquiry_qty}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>

              </Grid>

              <Grid item xs={12} md={12} gap={3} display={'flex'} justifyContent={'center'} marginBlock={1}>

                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Quantity UOM
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.uom}
                        error={Boolean(errors.uom)}
                        helperText={errors.uom}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Required Delivery Date
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.required_delivary_date}
                        error={Boolean(errors.required_delivary_date)}
                        helperText={errors.required_delivary_date}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Per Pcs Wight Required
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.per_pcs_w_req}
                        error={Boolean(errors.per_pcs_w_req)}
                        helperText={errors.per_pcs_w_req}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        material_type
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.material_type}
                        error={Boolean(errors.material_type)}
                        helperText={errors.material_type}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        material_grade
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.material_grade}
                        error={Boolean(errors.material_grade)}
                        helperText={errors.material_grade}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>

              </Grid>

              <Grid item xs={12} md={12} display={"flex"} gap={3} justifyContent={'flex-start'} >

                <Grid item xs={12} md={4}>
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Development Payable Y/N
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.dev_payload}
                        error={Boolean(errors.dev_payload)}
                        helperText={errors.dev_payload}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>
                <Grid item xs={12} md={4} >
                  <Stack>
                    <FormGroup>
                      <FormLabel
                        style={{ color: "black", fontWeight: "bold" }}
                        sx={{
                          fontSize: 12,
                          color: "black",
                        }}
                      >
                        Remarks
                      </FormLabel>
                      <TextField
                        size="small"
                        name="item_code"
                        onChange={handleChange}
                        value={values.remark}
                        error={Boolean(errors.remark)}
                        helperText={errors.remark}
                        fullWidth
                      />
                    </FormGroup>

                  </Stack>
                </Grid>

              </Grid>

            </Grid>
          </Grid>