عدم التعرف على المصفوفة و إرجاع القيمة undefined في مشروع react-redux

السلام عليكم.

في الشيفرة لماذا ترجع قيمة product إلى undefined

SingleProduct

import React from 'react'
import { useSelector } from 'react-redux'
// import { useParams } from 'react-router-dom'
import './singleProduct.css'

function SingleProduct() {

    const item = useSelector(state => state.products.SingleProduct)
    console.log(item)
  return (
    <div>
      SingleProduct
    </div>
  )
}

productSlice

initialState: {
        singleProduct: [],
    },
****************************
****************************
singleProduct(state,action){
            try {
                const singleItem = storeData.filter(item => item.id === action.payload)
                state.singleProduct = singleItem
            } catch (error) {
                
            }
        }
******************************
******************************
export const { singleProduct } = productSlice.actions

ملاحظة: للتوجه لهذه الصفحة يقع المرور بصفحة ProductCart

هذه شيفرة ProductCart للتوضيح

import React from 'react'
import { useDispatch } from 'react-redux'
import { Link, useParams } from 'react-router-dom'
import { singleProduct } from '../../features/slices/productSlice'

function ProductCard({id,img,name,text,price,color}) {

  const {type} = useParams()

  const dispatch = useDispatch()
  
  return (
    <Link 
      to={`/filteredProducts/${type}/${id}`}
      className = 'product-link' 
    >

      <div 
        className='product-card-container'
        onClick = {() => dispatch(singleProduct(id))} 
      >

        <div className="prod-img">
          <img src={img} alt={id}/>
        </div>
        <div className="prod-name">
          <h4>{name}</h4>
        </div>
        <div className="prod-text">
          <p>{text}</p>
        </div>
        <div className="prod-infos">
          <h3>{price}$</h3>
          <div className="colors">
              {
                  color.map((item,key) => (
                      <div className="prod-card-color" key={key} style={{backgroundColor:`${item}`}}></div>
                  ))
              }
          </div>
        </div>
      </div>
    </Link>
  )
}

export default ProductCard

شكرا لكم.