Закрыть меню при клике на один из его пунктов

Есть сайт на next.js, на нем есть панелька, которая выезжает из-за края при нажатии кнопки. Внутри панельки находится меню. Сама панелька и меню - разные компоненты. Задача - сделать так чтобы панелька открывалась и закрывалась при нажатии на кнопку, и закрывалась при нажатии на любой пункт меню. Если компонент меню убрать, а его код просто воткнуть в код панельки, то тогда все работает. А если сделать отдельный компонент меню, то не работает. Я сделал кастомный хук, который вероятно и глючит в компоненте меню, хотя ошибок никаких не выдает.

Вот этот хук:

// hooks/useSlideScreen

import { useState, useEffect  } from "react";

export default function useSlideScreen() {
  const [slideScreenActive, setSlideScreenActive] = useState(0)

    useEffect(() => {
        document.body.className = slideScreenActive ?  'isSlideActive'  : ''
    });

  return { slideScreenActive, setSlideScreenActive };
}

Компонент выезжающей панельки, в нем этот хук работает норм

// components/slideScreen

import styles from "@/styles/slideScreen.module.css"
import Nav from "./nav";

import useSlideScreen from '@/hooks/useSlideScreen'

const SlideScreen = () => {
    const {slideScreenActive, setSlideScreenActive} = useSlideScreen()

    const menuBtnClasses = [styles.menuBtn, "mainBtn", slideScreenActive ?  `${styles.active}`  : null].join(" ")
    const slideScreenClasses = [slideScreenActive ?  `${styles.slideScreen} ${styles.show}`  : `${styles.slideScreen}`, "dotsBg"].join(" ")



    return (
        <>
            <button
                className={menuBtnClasses}
                onClick={() => {
                    setSlideScreenActive(!slideScreenActive)
                }}
            >
                <span className={styles.burger}></span>
            </button>
            <div className={slideScreenClasses}>
                <div className="wrapper">

                    <Nav/>

                </div>
            </div>
        </>
    )

}

export default SlideScreen;

Компонент меню, где также должен работать хук (при клике на пункте меню закрываться панель), но не работает

// components/nav

import Link from "next/link";
import {useRouter} from "next/router";
import useSlideScreen from '@/hooks/useSlideScreen'

import styles from "@/styles/header.module.css"

const Nav = () => {
    const router = useRouter();
    const routes = ['Blog', 'Work', 'Contact'];
    const routesRu = ['Блог', 'Работы', 'Контакты'];

    const {slideScreenActive, setSlideScreenActive} = useSlideScreen(false)

    return (
        <nav className={styles.headerNav}>
            <ul className={styles.headerMenu}>
                {routes.map((route, i) => {
                    return (
                        <li key={route} className={`${router.pathname === `/${route.toLowerCase()}` && 'text-red-400'}`}>
                            <Link href={`/${route.toLowerCase()}`} onClick={() => { setSlideScreenActive(!slideScreenActive) }}>{routesRu[i]}</Link>
                        </li>
                    )
                })}
            </ul>
        </nav>
    )

}

export default Nav