Adding quantity in Cart component of my reactjs ecommerce website

1

I have created my first online shoe store project for learning react.
In my cart list I’m trying to increase the quantity of items and along with quantity I’m trying to increase total price too. I tried some ways as of my capabilities but I’m not getting good result.

In the code below I created a state using useState hook then with two buttons. I’m trying to increase and decrease my state. by that state then I’m trying to increase the quantity of my item then trying to multiply the price with that quantity. it works fine if there is one item in the cart. if there are more than 1 item, the button to increase the quantity of one item showing in my cart, it also increase the quantity of other item too. Thus the price also increase.

<>

  <Paper className={classes.total}>

    <h3>Total Items: {itemsInCart.length}</h3>

    <h3>Total Price: ${total}</h3>

  </Paper>

  <Container className={classes.root}>

    <Grid container spacing={2} className={classes.container}>

      {itemsInCart.map((shoe) => (

        <Grid item xs={12} sm={6} md={4} key={shoe.id}>

          <img

            src={shoe.imgurl}

            alt=""

            height="200px"

            className={classes.img}

            onClick={() => {

              navigate(`/products/${shoe.id}`);

            }}

          />

          <Typography variant="body1">{shoe.name}</Typography>

          <Typography variant="body2">Price: ${shoe.price}</Typography>

          <div>

            <span>Quantity</span>

            <button onClick={() =>  setCount(count + 1)}>+</button>

            {(shoe.qty = count)}

            <button

              onClick={() => {

                shoe.qty > 1 ? setCount(count - 1) : setCount(1);

              }}

            >

              -

            </button>

          </div>

        </Grid>

      ))}

    </Grid>

  </Container>

</>

);

};