toggle is not toggling element but it's collapsing element in navigation

I'm creating navigation for mobile devices. Everything works, but when I'm trying to open third level of navigation, it doesn't open, but collapses previous level. I dont know what to do and I'm pretty dissapointed, because it seems like easy thing and I feel like dumb. Someone have any tips please? :(

function MobileCategoriesLinks(props: MobileLinksProps) {
const { data } = useCollectionsQuery();

const { level = 0, onItemClick } = props;

const handleItemClick = (item: any) => {
    if (onItemClick) {
        onItemClick(item);
    }
};

const linksList = data?.collections.items.map((department, index) => {
    let item;

    if(department.parent?.id === "1") {
        const renderItem: RenderItemFn = ({ toggle, setItemRef, setContentRef }) => {
            let arrow = null;
            let subLinks = null;
            let linkOrButton = null;

            let link = "/" + department.children 
            
            if(department.children?.length) {
                arrow = (
                    <button className="mobile-links__item-toggle" type="button" onClick={toggle}>
                    <ArrowRoundedDown12x7Svg className="mobile-links__item-arrow" />
                    </button>
                );
            }



     
            let depChild = department.children?.map((name) => {
                let x = name.name
                let link = "/" + name.slug                
                let child = name
                let c = child.children
                

                if(child.children?.length) {

                    let thirdChild = child.children?.map((item, index) =>{
                        return item.name
                    })

                    let thirdChildSlug = child.children?.map((item, index) =>{
                        return item.slug
                    })

                    arrow = (
                        <button className="mobile-links__item-toggle" type="button" onClick={toggle}>
                        <ArrowRoundedDown12x7Svg className="mobile-links__item-arrow" />
                        </button>
                    );
                    
                    
                    subLinks = (
                        <div className="mobile-links__item-sub-links" ref={setContentRef}>
                        <ul className="mobile-links mobile--links--level--3">
                        <li>
                            <div className="mobile-links__item">
                                <div className="mobile-links__item-title">
                                    <a href={"/" + thirdChildSlug} className="mobile-links__item-link">{thirdChild}</a>
                                </div>
                            </div>
                        </li>
                        </ul>
                    </div>
                    )

                    if(child.children?.length) {
                        linkOrButton = (
                            <AppLink
                            href={"/" + child.slug}
                            className="mobile-links__item-link"
                            onClick={() => handleItemClick(link)}
                            >
                            {child.name}
                            </AppLink>
                        )} 
         
                        return (
                            <li>
                            <div className="mobile-links__item" ref={setItemRef}>
                                <div className="mobile-links__item-title">
                                    <AppLink
                                    href={"/" + child.slug}
                                    className="mobile-links__item-link"
                                    onClick={() => handleItemClick(link)}
                                    >
                                    {name.name}
                                    </AppLink>
                                    {arrow}
                                </div>
                                {subLinks}
                            </div>
                            </li>
                        )}
            
            return (
                <li>
                <div className="mobile-links__item">
                    <div className="mobile-links__item-title">
                        <a href={link} className="mobile-links__item-link">{x}</a>
                    </div>
                </div>
                </li>
            ); 
        }
        )

        subLinks = (
            <div className="mobile-links__item-sub-links" ref={setContentRef}>
                <ul className="mobile-links mobile--links--level--2">
                    {depChild}
                </ul>
            </div>
        )
        
        if(department.children) {
            linkOrButton = (
                <AppLink
                href={"/" + department.slug}
                className="mobile-links__item-link"
                onClick={() => handleItemClick(link)}
                >
                {department.name}
                </AppLink>
            )} else {
                linkOrButton = (
                <button
                type="button"
                className="mobile-links__item-link"
                onClick={() => handleItemClick(link)}
                >
                {department.name}
                </button>
                )
            }

        return (
            <div className="mobile-links__item" ref={setItemRef}>
                <div className="mobile-links__item-title">
                    {linkOrButton}
                    {arrow}
                </div>
                {subLinks}
            </div>
        );
    };
    item = <Collapse toggleClass="mobile-links__item--open" render={renderItem} />;
}

    return <li key={index}>{item}</li>
}
);

return ( <ul className={`mobile-links mobile-links--level--1`}>
            {linksList}
        </ul>
        );

}

export default withApollo(MobileCategoriesLinks)