after returning a state not able to override the value of a cart with a new value in in react.js

Question

I am completely new in react js and this is my first project. I have used Reducer to push item in cart but I am getting data in console but not able to in cart.

StateReducer.js

export const initialState = {
    cart : ["react", "javascript"],
    user: null,
   
}



const reducer = (state = { basket : [] }, action) => {
    console.log(action);
    switch (action.type) {
        case "ADD_TO_CART":
            return {
              ...state,
              cart: [...state.cart, action.payload],
            };
            
          
        case 'Removing_from_cart':
            //logic to adding cart
            return { state }
            
                
        default:
            return state;
    }
}

export default reducer`



this items.js page where I used useStateValue
Items.js

import React from 'react'
import './product.css'
import { useStateValue } from '../../ContextProvider';

function Items({id, product_name, price, currency, thumb}) {

    const [{ }, dispatch] = useStateValue();

    const handleClick = () => {
        dispatch({
            type : 'ADD-TO-CART',
            payload : {
                id: id,
                product_name: product_name,
                price: price,
                currency: currency,
                thumb: thumb,
            }
        });
    };
  return (
    <>
      <div className='product_info'>
        <div className='card'>
            <h6>{product_name}</h6>
            <p className='product__price'>{price} <span>{currency}</span></p>

            <div>
            <img className='product_img' src={thumb}  alt='img'/>
        </div>
            <button type='button' className='product_button' onClick={handleClick} >Add to Cart</button>
        </div>
        </div>
    </>
    
  );
}

export default Items

Cart.js

import React from 'react'
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import { Link } from 'react-router-dom';
import Orders from './Orders';
import Languages from './Languages'
import './Cart.css'
import Account from './Account';
import { useStateValue } from '../../ContextProvider';


function Cart() {

const [{ cart }] = useStateValue();
console.log(cart);
  return (
    <div className='header__nav'>
  
     <Languages />
      <Account />
      <Orders />

       <Link to="/checkout" className="header__Link">
                <div className="header__cart">
                    <ShoppingCartIcon className="header__optionLineone" sx={{fontSize: 40}} />
                    <span className="header__optionLinetwo cart__count">{cart?.length}</span>
                </div>
                
            </Link>

      
            
    </div>
  )
}

export default Cart

console:

prepareInjection.js:535 [Violation] 'message' handler took 299ms
Cart.js:14 
(2) ['react', 'javascript']
VM3147 installHook.js:1608 
(2) ['react', 'javascript']
0
: 
"react"
1
: 
"javascript"
length
: 
2
[[Prototype]]
: 
Array(0)
scheduler.development.js:517 [Violation] 'message' handler took 221ms
StateReducer.js:10 
{type: 'ADD-TO-CART', payload: {…}}
react_devtools_backend.js:2709 
{type: 'ADD-TO-CART', payload: {…}}
StateReducer.js:10 
{type: 'ADD-TO-CART', payload: {…}}
react_devtools_backend.js:2709 
{type: 'ADD-TO-CART', payload: {…}}
StateReducer.js:10 
{type: 'ADD-TO-CART', payload: {…}}
react_devtools_backend.js:2709 
{type: 'ADD-TO-CART', payload: {…}}
payload
: 
{id: 5, product_name: 'Hammer Bash 2.0 Over The Ear Wireless Bluetooth He…rs Playtime, Workout/Travel, Bluetooth 5.0 (Grey)', price: '1999', currency: '₹', thumb: 'https://m.media-amazon.com/images/I/71BrtUGEvvL._SL1500_.jpg'}
type
: 
"ADD-TO-CART"
[[Prototype]]
: 
Object

switch (action.type) {
        case 'Add_to_Cart':
            //logic to adding cart
            // return { 
            //     ...state,
            //     basket: [...state.basket, action.payload],
            //  };
            
             return {
                ...state,
                cart: state.cart.map(cart =>
                    cart.payload=== action.payload? {...cart, selected: true} : cart,
                ),
              };
    
        case 'Removing_from_cart':
            //logic to adding cart
            return { state }
            
                
        default:
            return state;
    }
}`

I have tried this also but again same output. not able to push item in cart. Anybody please suggest solution. Thank you so much in advanced.