Почему не работает reduce?

Не работает функция reduce для подсчёта товаров в setCount

  import React, {useEffect, useState} from 'react';
import {useParams} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import AddButton from "../components/UI/AddButton/AddButton";
import CardsOptions from "../components/CardsOptions";
import {sortBy} from "../utils/index";
import Card from "../components/Card";
import {getOne} from '../API/fetcher'
import {useFetching} from "../hooks/useFetching";
import {addToCart} from "../store/reducers/cartReducer";

const Pizza = () => {
    const {id} = useParams()
    const {products} = useSelector(state => state.productsReducer)
    const {items} = useSelector(state => state.cartReducer)
    const dispatch = useDispatch()
    const [card, setCard] = useState({})
    const [count, setCount] = useState(0)
    const [fetchById, isLoading, error] = useFetching(async () => {
        const res = await getOne(id)
        setCard(res)
    })
    const [activeThick, setActiveThick] = useState('')
    const [activeWidth, setActiveWidth] = useState('')

    useEffect(() => {
        fetchById()
        setCount(items.reduce((count, product) => count + (product.id === card.id ? 1 : 0), 0))
    }, [])

    useEffect(() => {
        setActiveThick(card?.size?.thickness[0]?.name)
        setActiveWidth(card?.size?.width[0]?.name)
    }, [card])

    const addToCartHandler = () => {
        const product = {
            id: card.id,
            img: card.img,
            title: card.title,
            price: card.price,
            options: {
                thick: activeThick,
                size: activeWidth,
            }
        }

        dispatch(addToCart(product))
        setCount(items.reduce((count, product) => count + (product.id === card.id ? 1 : 0), 1))
    }

    if (isLoading) {
        return false
    }

    if (error) {
        return false
    }

    return (
        <div className={'pizza-wrapper'}>
            <div className="category">
                <span>Главная</span>
                <span className={'circle'}></span>
                <span>{card.category}</span>
                <span className={'circle'}></span>
                <span className={'title'}>{card.title}</span>
            </div>
            <div className="card-content">
                <div className="card-info">
                    <h2>{card.title}</h2>
                    <h3>Вес: {card.weight} г.</h3>
                    <p>{card.description}</p>
                    <div className="card-info-footer">
                        <CardsOptions sizeObj={card.size} activeThick={activeThick} setActiveThick={setActiveThick}
                                      activeWidth={activeWidth} setActiveWidth={setActiveWidth}/>
                        <div className="footer">
                            <AddButton count={count} onClick={() => addToCartHandler()}/>
                            <span>от {card.price} ₽</span>
                        </div>
                    </div>
                </div>
                <div className="card-img">
                    <img src={`/assets/img/pizza/${card.id}.png`} alt="cardImg"/>
                </div>
            </div>
            <div className="popular">
                <h4>Рекомендуем попробовать:</h4>
                <div className="popular-list">
                    {sortBy(products, 'rating').reverse().slice(0, 4).map(item => <Card key={item.id} card={item}/>)}
                </div>
            </div>
        </div>
    );
};

export default Pizza;