menu da navbar ficar fechado ao usar em tela menor useState+useRef

Boa Noite =)

Estava criando uma navbar responsiva, que caso o 'User' girar a tela do dispositivo acompanhar. Verifiquei que havia um bug que o menu mobile continuava após após o aumento de largura conforme o print abaixo.

Fiz um ajuste no código e até funcionou e o bug nao ocorreu mais =)!!Só que ele esta iniciando com o menu aberto. O que seria estranho que a cada vez que o usuário dar reload o menu iniciar aberto(em modo mobile).

A única coisa que ficou faltando ele começar no modo mobile ou dar reload na pagina no modo mobile a tela do menu iniciar fechado. Agora fiquei sem ideias no momento T.T . Se alguém tiver alguma luz.

const Navbar = () => {
    const [isMobile, setIsMobile] = useState(false)

    // effect to change stat screen and avoid bug
    useEffect(() => {
        const handleResize = () => {
          if (window.innerWidth < 1024 ) {
            setIsMobile(true);
          } else {
            setIsMobile(false);
          }
        };
        handleResize();
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
      }, []);


    return (
        <nav className='fixed top-0 left-0 flex justify-between  w-full py-8 px-6 items-center bg-zinc-800 '>
            <div className='flex items-center gap-1'>
                <img src={logo} alt='logo' className='w-10 h-10 ' />
                <p className='text-3xl text-white '>Logo</p>
            </div>
            <div className={isMobile ? " max-lg:absolute max-lg:flex-col max-lg:top-full max-lg:left-0 max-lg:w-full max-lg:h-40 max-lg:bg-zinc-300 max-lg:overflow-hidden max-lg:shadow-lg" : "flex gap-8 text-white max-lg:hidden"}>
                {menuLink.map((link,index) => {
                    return (
                        <ul key={index}>
                            <li>
                                <a className="relative cursor-pointer text-2xl text-center max-lg:block max-lg:mt-3">{link.label}</a>
                            </li>
                        </ul>
                    )
                })}
            </div>
             <div className="menuIcon"  onClick={() => setIsMobile(!isMobile)} ref={btnRef}>
                {isMobile ? (<i class="fa-solid fa-xmark"></i>) : (<i class="fa-solid fa-bars"></i>)}
            </div>