Is it possible to use multiple states in hooks and how?

Question

React

Goodnight. Please tell me how can I use multiple states in hooks?

This component should return a menu of categories, so when choosing a settings mod, it will have to save the selected values ​​\u200b\u200band give out a list, I added a new data state and did everything the same with nav, but this does not work for me:

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>
    )

}

Thank you.