I have this totalAmount data from the cart.js and how can I pass it to the parent component(app.js) where I will be able to pass it to another child component(info.js). I tried passing it from the Cart.js to the parent, it won't work, this is what it would display:

Identifier 'totalAmount' has already been declared

codesandbox: https://codesandbox.io/s/add-to-cart-sampled-2-with-material-ui-table-pagination-with-reduced-cart-items-firebase-5id6gs?file=/src/Cart.js**strong text**

In the cart.js

const Cart = ({ cartItems, handleCartClearance, handleRemove, handleAdd }) => {

  const totalAmount = cartItems.reduce(
    (price, item) => price + item.quantity * item.price,
    0
  );

  return (
    <div>

    </div>
  );
};

export default Cart;

In the App.js How can I pass the totalAmount to the customerInfo component?

export default function App() {

  return (
    <div className="App">
      <CustomerInfo cartItems={cartItems} /> 
      <br />
          <Cart
            cartItems={cartItems}
            handleCartClearance={handleCartClearance}
            handleRemove={handleRemove}
            handleAdd={handleAdd}
          />
      </Stack>
    </div>
  );
}

CustomerInfo component:

const CustomerInfo = ({ cartItems }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(firstName, number, "info");
    console.log(cartItems, "cartItems, info");
    //console the totalAmount here
  };

  return (
    <Container style={{ padding: "12px" }}>

    </Container>
  );
};

export default CustomerInfo;