Hamburger Menu always appears when reloading the page

Question

I want to create a hamburger menu for a website for small screens, I use useState to set a variable to false by default then making an onClick function for a button which changes the useState variable and toggling the div with the menu items hidden and visible. The problem is although I have made the variable false when the page is reloaded the menu appears is there something I could do to fix that or should I go about this in another way.

Here is my code

export default function NavBar() {

    const [toggleMenu, setToggleMenu] = useState(false);
    const viewMenu = () => {
        setToggleMenu(!toggleMenu)
    }

  return (
    <>
        <div className="flex justify-around w-[90%] my-3 mx-auto rounded-md navbar bg-base-200">
            <div>
                <button onClick={viewMenu} className="text-xl btn">
                    <BiMenuAltLeft />
                </button>
            </div>
            <div>
                <button className="text-2xl btn btn-ghost">MEDFITS</button>
            </div>
            <div>
                <button className="p-2 text-xl btn"><VscAccount /></button>
                <button className="p-2 text-xl btn"><BiSearchAlt /></button>
            </div>
        </div>
        <div className={`w-fit bg-base-200 mx-10 rounded-md ${toggleMenu && "hidden" }`}>
            <ul className="p-4 text-center">
                <li><a className="btn btn-wide" href="/">HOME</a></li>
                <li><a className="btn btn-wide" href="/about">ABOUT</a></li>
                <li><a className="btn btn-wide" href="/shop">SHOP</a></li>
                <li><a className="btn btn-wide" href="/contact">CONTACT</a></li>
            </ul>
        </div>
    </>

I tried looking in the console for clues as to what is the problem but I didn't find anything.

Answer 1

To Fix this problem I just changed the default value of the toggleMenu to true