price показывает undefind что делать?

Я делаю добавление товара в корзину с redux и react. Моя проблема в том что когда я хочу отобразить общую сумму выбранных товаров ретернится NaN.

вот мой CartSlice.js в gonsole.log показывает undefind

import { createSlice } from "@reduxjs/toolkit";
import {toast} from "react-toastify"


const initialState = {
    cartItems: localStorage.getItem("cartItems")
    ? JSON.parse(localStorage.getItem("cartItems"))
    : [],
    cartTotalQuantity:0,
    cartTotalAmount:0,
    
};

const cartSlice = createSlice({
  name:"cart",
  initialState,
  reducers:{
    addToCart(state,action){
        const cartIndex = state.cartItems.findIndex(
            (item) => item.id === action.payload.id
        )
        if (cartIndex >= 0){
            state.cartItems[cartIndex].cartQuantity += 1
            toast.info(` Добавили еще 1 ${action.payload.title} в корзину `,{
                position: "bottom-left"
            })
        }else {
            const tempProduct = {...action.payload, cartQuantity:1};
            state.cartItems.push(tempProduct);
            toast.success(`${action.payload.title} добавлено в корзину`,{
            position: "bottom-left"}
            )
            
        } 
        localStorage.setItem("cartItems", JSON.stringify(state.cartItems))
    },
    removeFromCart(state, action){
        const nextCartItems = state.cartItems.filter(
            (carteItem) => carteItem.id !== action.payload.id
        );

        state.cartItems = nextCartItems;
        localStorage.setItem("cartItems", JSON.stringify(state.cartItems))
        toast.error(`${action.payload.title} удален из корзины`,{
            position: "bottom-left"}
            )
    },
    decreaseCart(state, action){
        const cartIndex = state.cartItems.findIndex(
            (cartItem) => cartItem.id === action.payload.id
        )
        if(state.cartItems[cartIndex].cartQuantity > 1){
            state.cartItems[cartIndex].cartQuantity -= 1;

            toast.info(`удалили  1 ${action.payload.title} `,{
                position: "bottom-left"}
                )
        } else if (state.cartItems[cartIndex].cartQuantity === 1){
            const nextCartItems = state.cartItems.filter(
                (carteItem) => carteItem.id !== action.payload.id
            );
    
            state.cartItems = nextCartItems;
            toast.error( `${action.payload.title} удален из избранных`,{
                position: "bottom-left"}
                )
        }
        localStorage.setItem("cartItems", JSON.stringify(state.cartItems))
    },
    clearCart(state, action){
        state.cartItems = [];
        toast.error( `Корзина очищен`,{
            position: "bottom-left"}
            )
            localStorage.setItem("cartItems", JSON.stringify(state.cartItems))
    },
    getTotals(state, action){
        let {total, quantity} = state.cartItems.reduce((cartTotal,cartItem)=>{
           const {price, cartQuantity} = cartItem;
           const itemTotal = price * cartQuantity;
           console.log(typof(price))
           cartTotal.total += itemTotal
           cartTotal.quantity += cartQuantity

           return cartTotal
        },{
            total:0,
            quantity:0
        });
        state.cartTotalQuantity = quantity;
        state.cartTotalAmount = total;
    }
  }
})
export const {addToCart,removeFromCart, decreaseCart,clearCart, getTotals} = cartSlice.actions
export default cartSlice.reducer;

Вот мой файл Index.jsx и часть кода где я их использую

 <div style={{display:'flex', justifyContent:'space-around'}}>
                 <div>
                 <h1>Количество</h1>
                  <div style={{display:'flex',  width:'100px',justifyContent:'center',textAlign:'center', alignItems:'center',}}>
                      <div style={{display:'flex',border:"1px solid",padding:'5px 15px 5px 15px',borderRadius:'5px',}}>
                      <span style={{ cursor:'pointer',}}  onClick = {() => handleDecreaseCart(cartItem)}>-</span>
                      <h1 style={{margin:'0 20px'}}>{cartItem.cartQuantity}</h1>
                      <span  style={{ cursor:'pointer'}} onClick={() => handleIncreaseCart(cartItem)}>+</span>
                      </div>
                  </div>
                 </div>
                   <div>
                   <h1>Общая сумма</h1>
                   
              <div>
             {cartItem?.sizes.map(cartItem=> <h1>{cartItem.price * cartItem.cartQuantity }</h1>)} 
             {/* выше показывает NaN */}
             {cartItem.price * cartItem.cartQuantity}
              </div>
                   </div>
                  </div>

Ответы (0 шт):