无效的挂钩校准

Question

我将Gatsby与CSS框架Bulma配合使用，为了使Mobile导航栏工作，您必须为按钮添加事件监听器，该按钮仅在屏幕尺寸达到特定尺寸时才可用。在以前版本的盖茨比中，它运行良好，直到最近一周我才遇到问题。现在我收到一个无效的挂接调用

import { Link } from 'gatsby'

let Header = () => {
    useEffect(() => {
        let burger = document.getElementById(`burger`);
        let menu = document.getElementById(`navMenu`)
        burger.addEventListener(`click`, function () {
            burger.classList.toggle(`is-active`);
            menu.classList.toggle(`is-active`)
        })
    });

    return (
        <>
            <nav className="navbar is-fixed-top" id="navbar">
                <div className="navbar-brand">
                    <Link to="/">
                        <p className="navbar-item">CMJR DEVELOPMENT</p>
                    </Link>

                    <a role="button" id="burger" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>
                </div>
                <div className="navbar-menu" id="navMenu">
                    <div className="navbar-end">
                        <Link to={"/service"} className="navbar-item ">Services</Link>
                        <Link to={"/portfolio"} className="navbar-item ">Portfolio</Link>
                        <Link to={"/contact"} className="navbar-item ">Contact</Link>
                    </div>
                </div>
            </nav>
        </>
    )
}

export default Header;

I know I'm doing something wrong, just not what.