Почему мобильное меню navbar из materialize css работает в firefox, но не работает в chrome

Есть отредактированный navbar из materialize css, при клике на гамбургер-меню в firefox оно открывается и все работает, но при клике в браузере chrome - меню не открывается, в консоли нет ни ошибок ни варнингов. В чем может быть проблема?

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>
  );
}