How can I sum up a value from a loop of child components in react?

I have two react components one is Cart and the other is CartItem, Inside Cart I am looping using .map the CartItem. Inside CartItem I have a line total which is price * item.count. How can I sum up all the line totals regardless how many CartItems I have, and return the Total so that I can have the overall value of the cart.
I tried to add a handle total function but its only returning line total of one element not all of them.

Here is the CartItem:

const CartItem = ({item, handleTotal}) => {
var [itemCount, SetItemCount] = useState(1);
var [Linetotal, SetLineTotal] = useState(item.price);
const incrementcount = () => {
SetItemCount(++itemCount);
};
const decrementcount = () => {
SetItemCount(--itemCount);
};
useEffect(() => {
handleTotal(item.id,Linetotal)
},[])
return (
<div>
<Product>
<ProductDetail>
<Image src={item.image} />
<Details>
<ProductName>
<b>Product:</b> {item.name}
</ProductName>
<ProductId>
<b>ID:</b> {item.id}
</ProductId>
<ProductColor color={item.color} />
<ProductSize>
<b>Size:</b> {item.size}
</ProductSize>
</Details>
</ProductDetail>
<PriceDetail>
<ProductAmountContainer>
<Add onClick={() => {incrementcount(); SetLineTotal(item.price*itemCount)}} />
<ProductAmount>{itemCount}</ProductAmount>
<Remove onClick={() => {decrementcount(); SetLineTotal(item.price*itemCount)}} />
</ProductAmountContainer>
<ProductPrice>$ {item.price*itemCount}</ProductPrice>
</PriceDetail>
</Product>
</div>
);
};
export default CartItem;

and Here is the Cart:

const Cart = () => {
var [total, setTotal] = useState([]);
const handleTotal = (id,price) => {
setTotal(id,price);
};
return (
<Container>
<Navbar />
<Announcement />
<Wrapper>
<Title>YOUR BAG</Title>
<Top>
<TopButton>CONTINUE SHOPPING</TopButton>
<TopTexts>
<TopText>Shopping Bag(2)</TopText>
<TopText>Your Wishlist (0)</TopText>
</TopTexts>
<TopButton type="filled">CHECKOUT NOW</TopButton>
</Top>
<Bottom>
<Info>
{IntheCart.map((item) => (
<CartItem key={item.id} item={item} handleTotal={handleTotal} />
))}
<Hr />
</Info>
<Summary>
<SummaryTitle>ORDER SUMMARY</SummaryTitle>
<SummaryItem>
<SummaryItemText>Subtotal</SummaryItemText>
<SummaryItemPrice>$ 80</SummaryItemPrice>
</SummaryItem>
<SummaryItem>
<SummaryItemText>Estimated Shipping</SummaryItemText>
<SummaryItemPrice>$ 5.90</SummaryItemPrice>
</SummaryItem>
<SummaryItem>
<SummaryItemText>Shipping Discount</SummaryItemText>
<SummaryItemPrice>$ -5.90</SummaryItemPrice>
</SummaryItem>
<SummaryItem type="total">
<SummaryItemText>Total</SummaryItemText>
<SummaryItemPrice>$ 80</SummaryItemPrice>
</SummaryItem>
<Button>CHECKOUT NOW</Button>
</Summary>
</Bottom>
</Wrapper>
<Footer />
</Container>
);
};
export default Cart;

You can create updateTotal function in the Card component and once you increse or decrement item in the CardItem update the total value.

const CartItem = ({item, handleTotal, updateTotal}) => {
// code...
const incrementcount = () => {
SetItemCount(++itemCount);
updateTotal(item.price);
};
const decrementcount = () => {
SetItemCount(--itemCount);
updateTotal(-item.price);
};
// code...

updateTotal function.

var [totalPrice, setTotalPrice] = useState(0);
const updateTotal = (value) => {
setTotalPrice(prev => prev + value)
} 

Add the updateTotal function to CardItem

 <CartItem key={item.id} item={item} handleTotal={handleTotal} updateTotal={updateTotal} />

If you need sub sum to so sub total, you can do like this.

const Cart = () => {
...
var [subSum, setSubSum] = useState(null);
var [totalSum, setTotalSum] = useState(0);
const handleTotal = (id,price) => {
setSubSum({...subSum, id:price});  
};
useEffect(()=>{
var sum = 0;
for (const [key, value] of Object.entries(subSum)) {
sum += value;
}
setTotalSum(sum);
},[total])
...
}