Как сгладить массив состояний в Material-UI?

Я использую Material-UI в качестве внешнего интерфейса для своего приложения электронной коммерции.

У меня есть пустой массив состояния корзины, который будет принимать «строковые объекты», которые впоследствии будут проанализированы. Каждый handleChange () в компоненте select должен добавлять объект (stringified object) в массив cart.

HandleChange () вкладывает объекты внутри себя, т. Е. [Ob1, [obj2, [obj3, [etc [etc]]]]] - но мне нужно [obj1, obj2, obj3 и т. Д.] Вместо этого ...

Код -

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Icon from '@material-ui/core/Icon';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import soda from "./soda.jpg";
import * as firebase from 'firebase';



const useStyles = makeStyles(theme=>({
  card: {
    maxWidth: 345,
    marginTop: 170,
    marginLeft: 70,
  },
  media: {
    height: 0,
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function MediaCard() {

  const classes = useStyles();
  const [age, setAge] = React.useState('');
  let [cart, setCart]= React.useState([]);
  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() => {

      }, []);


 const handleChange = event =>{
           Array.prototype.flat(cart)
           setCart([cart].concat(event.target.value));
           console.log(cart);
         };



 let item = {
     itemDescription:"CBD FLOWER",
     itemName: "CBD",
     increments: {
         gram: {
             price: 10,
             weight: 1,
             name: "CBD",
         },
         eighth: {
             price: 30,
             weight: 3.5,
             name: "CBD",
         },
         quarter: {
             price: 70,
             weight: 7,
             name: "CBD",
         },
         half: {
             price: 140,
             weight: 14,
             name: "CBD",
         },
         ounce: {
             price: 300,
             weight: 28,
             name: "CBD",
         },

     }

 };



  let stringified = JSON.stringify(item.increments.gram);







  /*let getDiv = document.getElementById('testo');
      let getInput = getDiv.getElementsByTagName('input');
      for (let i = 0, n = getInput.length; i < n; i = i+1){
          console.log(getInput[i].value);
   }*/




  return (



    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={item.itemName}
          height="500"
          image={soda}
          src={soda}
          title="CBD SODA"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {item.itemName}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            A refreshing drink filled w/ 28.8% CBD
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
      <div id="testo">
        <FormControl className={classes.formControl}>
        <InputLabel id="demo">Choose</InputLabel>
        <Select
          labelId="demo"
          id="selectedItem"
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
        >
          <MenuItem value={JSON.stringify(item.increments.gram)}>10</MenuItem>
          <MenuItem value={JSON.stringify(item.increments.eighth)}>30</MenuItem>
          <MenuItem value={JSON.stringify(item.increments.quarter)}>90</MenuItem>
          <MenuItem value={JSON.stringify(item.increments.half)}>140</MenuItem>
          <MenuItem value={JSON.stringify(item.increments.ounce)}>300</MenuItem>
        </Select>
        <FormHelperText>Quantity + Price</FormHelperText>
      </FormControl>
      <div id="seperator">
      <Button variant="outlined" color="primary">
          Add To Cart
      </Button>
      </div>
      </div>

      </CardActions>


    </Card>


    );

}

Я попытался сгладить массив после, но ничего. Я также пытался Array.prototype.push (), пожалуйста, помогите, лол