There is an edited navbar from materialize css, when you click on the hamburger menu in firefox, it opens and everything works, but when you click in the chrome browser, the menu does not open, there are no errors or warnings in the console. What could be the problem?

Navbar.js:

export const Navbar = () => {
  document.addEventListener('DOMContentLoaded', function() {
    const elems = document.querySelectorAll('.sidenav');
    window.M.Sidenav.init(elems);
  });

  return (
    <header>
      <nav>
        <div className="nav-wrapper blue darken-1" style={{ padding: '0 2rem' }}>
          <span className="brand-logo"><NavLink to="/">LOGO</NavLink></span>
          <NavLink to="#" data-target="mobile-demo" className="sidenav-trigger"><i className="material-icons">menu</i></NavLink>
          <ul className="right hide-on-med-and-down">
            <li><NavLink to="/">Главная</NavLink></li>
            <li><NavLink to="/other">Other</NavLink></li>
          </ul>
        </div>
      </nav>

      <ul className="sidenav" id="mobile-demo">
          <li><NavLink to="/">Главная</NavLink></li>
          <li><NavLink to="/other">Other</NavLink></li>
      </ul>
    </header>
  );
}