Можно ли использовать несколько состояний в хуках и как?

Question

[historydev]

Доброй ночи. Скажите пожалуйста как я могу использовать несколько состояний в хуках?

Этот компонент должен возвращать меню категорий, так-же при выборе мода настроек он должен будет сохранять выбранные значения и выдавать список, я добавил новое состояние data и сделал всё аналогично с nav, но это не работает для меня:

export default function GetCategory({mode}) {

    let [nav, setNav] = useState([]);
    let [data, setData] = useState([]);

    let navSettings = [];

    const selectCategoryItem = (e) => {

        navSettings.push(e.target.innerText);

        navSettings = [...new Set(navSettings)];
        
        console.log(navSettings);

        e.target.closest('.globalSelect').querySelector('li:nth-child(1)').innerText = `${e.target.innerText}`;

    };

    const getData = () => {

        setData(navSettings);

        console.log(data)

    };

    const getMenu = async() => {

        let menu = await fetch('http://localhost:4000/menu', {method: 'post'});
        menu = await menu.json();

        return setNav(menu)

    };

    const UseMenu = ({element}) => element.map(el => (
        <ul className='select' onClick={(e) => selectCategoryItem(e)}>
            <li> {el.title} </li> <i className='fas fa-chevron-down' />
            <div className="selectContent">
                {el.children ? el.children.map(ch => (
                    <ul className='select' onClick={(e) => selectCategoryItem(e)}>
                        <li> {ch.title} </li> <i className='fas fa-chevron-down' />
                        <div className="selectContent">
                            {ch.children ? ch.children.map(ch2 => (<li>{ch2.title}</li>)):''}
                        </div>
                    </ul>
                )):''}
            </div>
        </ul>
    ));

    const selectClick = (e) => {

        e.target.closest('.select').querySelector('li:nth-child(1)').style.fontWeight =
            e.target.closest('.select').querySelector('li:nth-child(1)').style.fontWeight === '' ? 'bold' : '';

        return e.target.closest('.select').querySelector('.selectContent').style.display =
            e.target.closest('.select').querySelector('.selectContent').style.display === '' ? 'flex' : '';

    };

    useEffect(() => {
        getData();
        getMenu();
    }, []);

    return (
        <div className='selectHome'>
            <ul className='select globalSelect' onClick={(e) => selectClick(e)}>
                <li> Выберите категорию </li> <i className='fas fa-chevron-down' />
                <div className="selectContent">
                    <UseMenu element={nav} />
                </div>
            </ul>
            <div className="settings">
                {data.map(el => el)}
            </div>
        </div>
    )

}

Спасибо.

Comments

[Robur]

напишите что значит "это не работает"
использовать много useState - нормально.

[historydev]

Robur, я нашёл вроде как причину "не работает", у меня useEffect одноразовый для менюшки, а для выборки нужно его постоянно обновлять - поэтому я получаю лишь один пункт, я пока реализовал временное решение через js.