Не получается сохранить объект в state

Это интернет магазин, если выбираю товар он отображается в новом компаненте корректно и выглядит всё хорошо, если я находяся на странице товара нажму обновить браузер то вылетает ошибка, массив products, который я получаю при помощи селектора

const products = useSelector(state => state.products.productsArr)

оказывается пустым, опять же в первый раз, когда я открыл страницу с этим компанентом, массив products заполнился элементами из state.products.productsArr, после обновления эти элементы теряются и не заполняются снова, я подумал решить эту проблему через setState, то есть когда в первый раз products заполнился элементами, я также создаю стайте и заполняю его теми же элементами и он, как я думал, не будет очищаться после обновления страницы в браузере, но этог не произошло. Подскажите как это можно решить?

Код всего компанента

const ProductItem = (props) => {

debugger
const params = useParams()
const products = useSelector(state => state.products.productsArr)
const [productState, setProductState] = useState(products)


const dispatch = useDispatch();
const commonPrice = useSelector(state => state.carts.commonPrice)
const itemsInCart = useSelector(state => state.carts.itemsInCart)

const item = productState.filter((item) => item.id === params.id);
const obj = item[0];


const goBack = () => {
    props.history.goBack();
}

useEffect(() => {
    fetchAllItems()
    console.log('product state: ', productState);
    console.log('item: ', obj);
}, [products])




const onAddBtnClick = (item) => {

    dispatch(addItemInCart(item, commonPrice, itemsInCart))
    

}

const onCommentBtnClick = () =>{
    alert('btn pressed')
}
return (
<div>
    <div className='product-item'>
        <div>
            <img src={obj.image} alt={obj.name}/>
        </div>
        <div className='product-info'>
            <h2>{obj.name}</h2>
            <h4>Price: <strong>{new Intl.NumberFormat().format(obj.price)}</strong></h4>
            <div className='descItems'>
                {!obj.description && <div>no description</div>}
                {obj.description && <div>{obj.description}</div>}
            </div>
            <div className='product-buttons'>

                <div><button  onClick={() => onAddBtnClick(obj)} className='btn btn-success me-2'>add to cart</button></div>
                <div><button onClick={goBack} className='btn btn-info me-2'>back</button></div>
            </div>
        </div>
    </div>

Вот код ошибки

TypeError: Cannot read properties of undefined (reading 'image')

А вот ссылка на гит на всё приложение

https://github.com/AnotherSidePhobos/HeadPhonesStoreWithReduxAndHooks