How can I aggregate the values from my repeating form components?

I have this component named Component.js with input fields for the user to enter the required values. I created another component where I could repeat all of these input fields by repeating the Component.js. How can I aggregate the values entered in the Component.js and submit these values in the parent component? Any help would be appreciated. Thank you.

Link: https://codesandbox.io/s/form-order-working-4f6g2?file=/demo.js:0-329

Component.js

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

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

  const handleChangeSize = (e, p) => {
    if (e && p) {
      p.size = e.target.value;
      const updatedObject = productArr.map((product) =>
        product.key === p.key ? p : product
      );
      setProductArr(updatedObject);
    }
  };

  const handleChangeDesign = (e, p) => {
    if (e && p) {
      p.design = e.target.value;
      const updatedObject = productArr.map((product) =>
        product.key === p.key ? p : product
      );
      setProductArr(updatedObject);
    }
  };

  const handleChangeColor = (e, p) => {
    if (e && p) {
      p.color = e.target.value;
      const updatedObject = productArr.map((product) =>
        product.key === p.key ? p : product
      );
      setProductArr(updatedObject);
    }
  };

  const handleChangeQty = (event) => {
    setQty(event.target.value);
    while (productArr.length > 0) {
      productArr.pop();
    }
    let updateProductArr = [...productArr];
    for (let i = 0; i < event.target.value; i++) {
      updateProductArr.push({
        key: i + 1,
        size: "",
        design: "",
        color: ""
      });
    }
    setProductArr(updateProductArr);
  };

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

  //for removing the textfields
  const handleRemove = (e) => {
    const reducedArr = productArr.filter((product) => product.key !== e);
    setProductArr(reducedArr);
    console.log(e);
    setQty(qty - 1);
  };

  const handleAdd = (e) => {
    const addArr = productArr.filter((product) => product.key !== e);
    setProductArr(addArr);
    console.log(addArr);
  };

  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={handleChangeQty}
          fullWidth
        />
        <br />
        <br />
        {productArr.map((product) => (
          <div key={"div-" + product.key}>
            <p>{product.key}</p>

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

            <br />
            <br />
            <FormControl fullWidth>
              <InputLabel id="demo-simple-select-label-{product.key}">
                Choose Design
              </InputLabel>
              <Select
                labelId={"demo-simple-select-label-" + product.key}
                id={"demo-simple-select-" + product.key}
                value={product.design}
                label="Product"
                onChange={(e) => handleChangeDesign(e, product)}
              >
                <MenuItem value="Design1">Design1</MenuItem>
                <MenuItem value="Design2">Design2</MenuItem>
                <MenuItem value="Design3">Design3</MenuItem>
              </Select>
            </FormControl>

            <br />
            <br />
            <FormControl fullWidth>
              <InputLabel id="demo-simple-select-label-{product.key}">
                Choose Color
              </InputLabel>
              <Select
                labelId={"demo-simple-select-label-" + product.key}
                id={"demo-simple-select-" + product.key}
                value={product.color}
                label="Color"
                onChange={(e) => handleChangeColor(e, product)}
              >
                <MenuItem value="Red">Red</MenuItem>
                <MenuItem value="Blue">Blue</MenuItem>
                <MenuItem value="Yellow">Yellow</MenuItem>
              </Select>
            </FormControl>
            <br />
            <br />

            {product.length !== 1 && (
              <Button
                variant="contained"
                onClick={() => handleRemove(product.key)}
                // onClick={() => handleColorRemove(index)}
              >
                Remove
              </Button>
            )}
            <br />
            {product.length <= 1 && (
              <Button onClick={handleAdd(product.key)}>
                Add more Product{" "}
              </Button>
            )}
          </div>
        ))}

        <br />
        <br />
        {/* <Button type="submit">Submit </Button> */}
      </form>
    </Box>
  );
}

Too add more component:

ButtonAdd.js

import React, { useState } from "react";
import Component from "./component";

const ButtonAdd = () => {
  const [inputList, setInputList] = useState([]);

  const onAddBtnClick = (event) => {
    setInputList(inputList.concat(<Component key={inputList.length} />));
  };
  return (
    <>
      <button onClick={onAddBtnClick}>Add a product</button>
      {inputList}
    </>
  );
};

export default ButtonAdd;

Parent component or the Demo.js

const Demo = () => {
  return (
    <>
      <Component />
      <br />
      <ButtonAdd />
      <br />
      <Button>Submit</Button>
    </>
  );
};

export default Demo;