'Dynamically adding more `select` and it does not show the value anymore

I was trying to duplicate the select field. However, it does not show any value anymore. If I'll choose small for the size, this is what it shows in the console.

This is the codesandbox link: https://codesandbox.io/s/basicselect-material-demo-forked-4g34r?file=/demo.js

The codes:

import React, { useState, useEffect } from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

import { TextField, Button } from "@mui/material";

export default function BasicSelect() {
  const [prod, setProd] = useState("");
  const [qty, setQty] = useState(0);
  const [design, setDesign] = useState("");
  const [size, setSize] = useState("");

  const handleChange = (event) => {
    setProd(event.target.value);
  };

  const handleChangeSize = (event) => {
    setSize(event.target.value);
  };

  const handleChangeDesign = (event) => {
    setDesign(event.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(prod, qty, size, design);
  };

  const [sizeList, setSizeList] = useState([{ size: "" }]);
  console.log(sizeList);

  //helper method
  const handleAdd = () => {
    setSizeList([...sizeList, { size: "" }]);
  };

  const handleRemove = (index) => {
    const list = [...sizeList];
    list.splice(index, 1);
    setSizeList(list);
  };

  const handleSizeChange = (e, index) => {
    const { name, value } = e.target.value;
    setSize(e.target.value);
    const list = [...sizeList];
    list[index][name] = value;
    setSizeList(list);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <form onSubmit={handleSubmit}>
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Product</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={prod}
            label="Product"
            onChange={handleChange}
          >
            <MenuItem value="Item1">Item1</MenuItem>
            <MenuItem value="Item2">Item2</MenuItem>
            <MenuItem value="Item3">Item3</MenuItem>
          </Select>
        </FormControl>
        <br />
        <br />
        {/* <TextField
          type="number"
          label="Quantity"
          variant="outlined"
          value={qty}
          onChange={(e) => setQty(e.target.value)}
          fullWidth
        /> */}

        <br />

        <br />
        {sizeList.map((singleSize, index) => (
          <div key={index}>
            <FormControl fullWidth>
              <InputLabel id="demo-simple-select-label">Size</InputLabel>
              <Select
                labelId="demo-simple-select-label"
                id="size"
                value={singleSize.size}
                label="Product"
                // onChange={handleChangeSize}
                onChange={(e) => handleSizeChange(e, index)}
              >
                <MenuItem value="S">Small</MenuItem>
                <MenuItem value="M">Medium</MenuItem>
                <MenuItem value="L">Large</MenuItem>
              </Select>
            </FormControl>

            <br />
            <br />
            {sizeList.length > 1 && (
              <Button
                onClick={() => handleRemove(index)}
                variant="contained"
                color="secondary"
              >
                Remove{" "}
              </Button>
            )}
            <br />
            <br />
            {sizeList.length - 1 === index && (
              <Button variant="contained" onClick={handleAdd}>
                {" "}
                Add Quantity
              </Button>
            )}
          </div>
        ))}

        <br />
        <br />
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Choose Design</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={design}
            label="Product"
            onChange={handleChangeDesign}
          >
            <MenuItem value="Design1">Design1</MenuItem>
            <MenuItem value="Design2">Design2</MenuItem>
            <MenuItem value="Design3">Design3</MenuItem>
          </Select>
        </FormControl>
        <br />
        <br />
        <Button type="submit">Submit </Button>
      </form>
      <Button>Add more Product </Button>
    </Box>
  );
}

Any help would be appreciated. Thank you

Update: Link: https://codesandbox.io/s/form-1-ls6rx?file=/demo.js The value of the select now shows. But it does not update correctly in the console.

If I'll select M in the first field. The console shows {size: " "}. Adding another quantity and selecting a size. This is what console shows {size: 'M'} {size: ''}