у меня ошибка стейт изменятся после двух нажатий кто может помочь помогите пж)

home.jsx

Categories.jsx

import React, {useEffect, useState,} from 'react';

    const Categories = ({changeCategoryTitle,wht}) => {

    const items = ['Все', 'Мясные', 'Вегетарианская ', 'Гриль', 'Острые', 'Закрытые']

    useEffect(() => {
        let items = document.querySelectorAll('.categories__item')
        items[0].classList.add('active')

        items.forEach((item) => {
            item.addEventListener('click', function (currentItem) {

                items.forEach(item => {
                    item.classList.remove('active')
                })
                currentItem.target.classList.add("active");
            })
        })

    }, [])


    return (
        <div className="categories">
            <ul>
                {items.map((item, i) => (
                    <li key={i} onClick={() => {
                        changeCategoryTitle(i)
                        console.log(i)
                        wht(i)
                    }} className="categories__item">{item}</li>
                ))}
            </ul>
        </div>
    );
};

export default Categories;