我试图toogling我的标题菜单，但我得到几个错误，当我运行应用程序在我的浏览器
CSS类

@media screen and (max-width:800px) {
  .header__hamburger {
      display: block;
      position: fixed;
      top:30px;
      right: 20px;
  }

  .header__hamburger.active .header__hamburger-line:nth-child(2) {
     opacity: 0;
  }

  .header__hamburger.active .header__hamburger-line:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
   }

   .header__hamburger.active .header__hamburger-line:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
   }
}

@media screen and (max-width:800px) {
  .header__navcontainer {
      display: flex;
      margin-top: -400px;
      flex-direction: column;
      align-items: center;
      width: 75%;
      transition: 0.5s linear;
      opacity: 0;
  }

  .header__navcontainer.active {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 75%;
      transition: 0.5s linear;
      opacity: 1;
      margin-top: 0px;
  }
}

function AppHeader() {

    return (
        <header className={headerStyle.header}>
            <div className={headerStyle.header__content}>

                <nav className={headerStyle.header__navbar}>
                    <a>
                        <img className={headerStyle.header__logo} src={Logo} alt="Logo" />
                    </a>

                    <div className={headerStyle.header__hamburger}>
                        <span className={headerStyle.header__hamburgerline}></span>
                        <span className={headerStyle.header__hamburgerline}></span>
                        <span className={headerStyle.header__hamburgerline}></span>
                    </div>

                    <div className={headerStyle.header__navcontainer}>
                        <ul className={headerStyle.header__linkscontainer}>
                          ... 
                        </ul>
                    </div>
                </nav>

            </div>
        </header>
    );
}

export default AppHeader;

在js上我可以让它工作，但在react上我不知道怎么做。有人能给我给予一下怎么解决这个问题吗？
我试着搜索不同的东西，在网上我看到有人建议使用useEffect钩子，其他人使用useState，但在我的情况下，我不知道如何使用它们，因为我有css类结合的动画（汉堡包成为一个X时，点击它）
这是我在JS上的脚本，如果我不使用react，它可以正常工作。

const hamburger = document.getElementsByClassName('header__hamburger')[0];
const navMenu = document.getElementsByClassName('header__nav-container')[0];

hamburger.addEventListener('click', () => {
    navMenu.classList.toggle('active')
    hamburger.classList.toggle('active')
});

document.querySelectorAll(".header__link").forEach(n => n.addEventListener("click", () => {
    navMenu.classList.remove('active')
    hamburger.classList.remove('active')
}));