我的汉堡包菜单无法在点击时工作，我收到消息“isOpen”未定义，openModal未定义，closeModal未定义。我很确定我的代码中定义了isOpen、openModal和closeModal，但我看不到问题出在哪里。我的javascript代码正确吗？非常感谢您的帮助，谢谢！
代码如下

import Image from "next/image";
import logoImage from "/public/logo.svg";
import burgerImage from "/public/nav-burger.svg";
import closeImage from "/public/close.svg";
import styles from "/components/Layout/layout.module.css";
import { useRouter } from "next/router";
import styled from "styled-components";
import { SmallButton } from "/components/SmallButton/index";
import { useEffect, useState } from "react";
import FocusTrap from "focus-trap-react";

const Navbar = () => {
  const router = useRouter();
  const RedLink = styled.a`
    color: #0f23da;
  `;

  const Navbar = ({ header, width, height }) => {
    const [isOpen, setisOpen] = useState(false);

    const closeModal = () => {
      document.documentElement.style.overflowY = "unset";

      setisOpen(false);
    };
    const openModal = () => {
      // Disables Background Scrolling whilst the SideDrawer/Modal is open
      if (typeof window != "undefined" && window.document) {
        let vh = window.innerHeight * 0.01;
        // Then we set the value in the --vh custom property to the root of the document
        document.documentElement.style.setProperty("--vh", `${vh}px`);
        document.documentElement.style.overflowY = "hidden";
      }

      setisOpen(true);
    };
    useEffect(() => {
      if (isOpen) {
        const container = document.querySelector("#first-link");
        if (container) {
          container.tabIndex = -1;
          container.focus();
          setTimeout(() => container.removeAttribute("tabindex"), 1000);
        }
      }
    });
    useEffect(() => {
      if (width > 1024) {
        closeModal();
      }
      let vh = window.innerHeight * 0.01;
      // Then we set the value in the --vh custom property to the root of the document
      document.documentElement.style.setProperty("--vh", `${vh}px`);
    }, [width, height]);
    let mobileMenuClass = null;
    if (isOpen) {
      mobileMenuClass = "overflow-y-auto nav-header";
    }
  };

  return (
    <FocusTrap active={isOpen}>
      <header>
        <nav className="flex flex-col justify-between">
          <div className="px-6 md:px-8.5 lg:px-40">
            <div className="max-auto max-w-container">
              <div className="flex h-[68px] justify-between border-b-2 border-solid border-blue-700 lg:h-[122px] i">
                <div className="flex">
                  <div>
                    <Link href="/">
                      <Image
                        src={logoImage}
                        className="h-[42px] w-[96px] lg:h-[70px] lg:w-[130px]"
                        alt=""
                        width="120"
                        height="120"
                      />
                    </Link>
                  </div>
                  <ul className=" hidden items-stretch gap-3 md:ml-14 md:gap-12 lg:ml-32 lg:flex">
                    <li>
                      <Link
                        href={"/about"}
                        legacyBehaviour
                        className="flex h-full font-medium   items-center border-0 border-b-blue-700 border-t-transparent hover:border-y-4 max-lg:border-transparent"
                      >
                        <RedLink
                          className={
                            router.pathname == "/about" ? styles.activeTab : ""
                          }
                        >
                          About
                        </RedLink>
                      </Link>
                    </li>
                    <li>
                      <Link
                        href={"/careers"}
                        legacyBehaviour
                        className="flex h-full font-medium  items-center border-0 border-b-blue-700 border-t-transparent hover:border-y-4 max-lg:border-transparent"
                      >
                        <RedLink
                          className={
                            router.pathname == "/careers"
                              ? styles.activeTab
                              : ""
                          }
                        >
                          Careers
                        </RedLink>
                      </Link>
                    </li>
                    <li>
                      <Link
                        href={"/blogs"}
                        legacyBehaviour
                        className="flex h-full font-medium   items-center border-0 border-b-blue-700 border-t-transparent hover:border-y-4 max-lg:border-transparent"
                      >
                        <RedLink
                          className={
                            router.pathname == "/blogs" ? styles.activeTab : ""
                          }
                        >
                          Blog
                        </RedLink>
                      </Link>
                    </li>
                  </ul>
                </div>
                <ul className="flex items-stretch">
                  <li class="ml-4 hidden lg:block">
                    <Link
                      className="flex h-full font-medium    items-center border-0 border-b-blue-700 border-t-transparent hover:border-y-4 max-lg:border-transparent"
                      target="_blank"
                      href="https://www.tbd.website/"
                    >
                      TBD Home
                    </Link>
                  </li>
                  <li className="mt-4 block h-[24px]  w-[24px] lg:hidden">
                    <button aria-label="Close Menu">
                      <div className="relative h-6 w-6">
                        <span className="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position:absolute; inset: 0px;">
                          <SmallButton
                            src={closeImage}
                            aria-label="Close Menu"
                            alt=""
                            height={30}
                            width={30}
                            clickHandler={closeModal}
                          />
                        </span>
                      </div>
                    </button>
                  </li>

                  <li className="mt-4 -ml-6 block h-[24px]  w-[24px] lg:hidden">
                    <button aria-label="Open Menu">
                      <div className="relative h-6 w-6">
                        <span className="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position:absolute; inset: 0px;">
                          <SmallButton
                            src={burgerImage}
                            aria-label="Open Menu"
                            alt=""
                            height={30}
                            width={30}
                            clickHandler={openModal}
                          />
                        </span>
                      </div>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </nav>
      </header>
    </FocusTrap>
  );
};

export default Navbar;```