I cannot get the total because of the type of calculateTotal function

import CartItem from "./CartItem"
import {CartItemType} from '../App'
import {Typography,Stack} from '@mui/material';
type Props ={
    cartItem:CartItemType[];
    addToCart:(clickedItem: CartItemType)=>void;
    removeFromCart:(id:number) => void;
}
const Cart: React.FC<Props> = ({cartItem,addToCart,removeFromCart}) => {
  const calculateTotal=(items: CartItemType[])=>{
    items.reduce((ack:number,item)=>ack + item.amount* item.price, 0)
  }
  return (
    <Stack sx={{width:'25em'}}>
        <h4>Your Shopping Cart</h4>
        {cartItem.length ===0? <p>No items in cart.</p>: null}
        {cartItem.map(item=>(

        <CartItem key={item.id} item={item} addToCart={addToCart} removeFromCart={removeFromCart}/>
        ))}
        {/* Total */}
        <p>Total: ${calculateTotal(cartItem)}</p>
    </Stack>
  )
}

export default Cart

The calculateTotal function does not work couse it’s type

and that’s the error messege

Type ‘void’ is not assignable to type ‘ReactNode’
This JSX tag’s ‘children’ prop expects a single child of type ‘ReactNode’, but multiple children were provided.

>Solution :

You need to return the value from calculateTotal function

const calculateTotal=(items: CartItemType[])=>{
  return items.reduce((ack:number,item)=>ack + item.amount* item.price, 0)
}