Проблема с объектами в разных браузерах

Проблема в том, что объекты выводится только в браузере Microsoft Edge и все работает как надо. В браузере Google chrome объект не выводится и функция не работает, потому что в консоле видно, что его не существует (браузер я обновил до последнего обновления). И я не могу разобраться как решить эту ошибку. Может кто-то сталкивался с этой ошибкой ?

import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Row, Col, ListGroup, Figure, Button } from "bootstrap-4-react";
import { Card } from "react-bootstrap";
import Message from "../components/Message";
import { addProductToCart, removeProductFromCart } from "../redux/actions/cart.actions";
import { Form } from "react-bootstrap";
import styled from 'styled-components';

const Cart = ({ match, location, history }) => {
  const productId = match.params.id;
  const quantity = location.search ? Number(location.search.split("=")[1]) : 1;

  const dispatch = useDispatch();

  const cartProductList = useSelector((state) => state.cart);
  const { cartProductItems } = cartProductList;

  useEffect(() => {
    if (productId) {
      dispatch(addProductToCart(productId, quantity));
    }
  }, [dispatch, productId, quantity]);

  const removeFromCartHandler = (id) => {
    dispatch(removeProductFromCart(id));
  };

  const checkoutHandler = () => {
    history.push("/login?redirect=shipping");
  };

  return (
<>
{cartProductItems.map((item) => (
    <a>{item.name}</a>
))}
</>
)
};

export default Cart;

redux

const cartReducer = (state={ cartProductItems: [], shippingAddress: {} }, action) => {
    switch(action.type) {
        case CART_ADD_PRODUCT:
            const item = action.payload;
            const existProduct = state.cartProductItems.find(x => x.product === item.product);
            if(existProduct) {
                return {
                    ...state,
                    cartProductItems: state.cartProductItems
                        .map(x => x.product === existProduct.product ? item : x)
                };
            } else {
                return { 
                    ...state,
                    cartProductItems: [...state.cartProductItems, item] 
                };
            }
        case CART_REMOVE_PRODUCT:
            return { 
                ...state,
                cartProductItems: state.cartProductItems
                    .filter(x => x.product !== action.payload) 
            };
        case CART_SAVE_SHIPPING_ADDRESS:
            return { 
                ...state,
                shippingAddress: action.payload
            };
        case CART_SAVE_PAYMENT_METHOD:
            return { 
                ...state,
                paymentMethod: action.payload
            };
        case CART_RESET_PRODUCTS:
            return {
                cartProductItems: [], 
                shippingAddress: {},
                paymentMethod: ''
            }
        default:
            return state;
    }
}

export { cartReducer };

все тоже самое, но теперь в Google chrome

TypeError: cartProductItems.map is not a function