切换导航按钮没有出现在网页上？

Question

我正在尝试使用reactjs功能组件创建导航栏。我只是将html元素包装到每个功能组件中。我正在传递数据，因为allnavitems包含所有数据。它包含标题和下拉标题。

代码：

const Header = ({allnavitems, loading}) => {

  if (loading) {
      return <div><p>Loading...</p></div>
  }

  let navitems = allnavitems.filter( (value) => value.links.length !==0 )

  return(
      <header>
        <nav className="navbar">
          <ToggleNav/>
            <div className="collapse navbar-collapse navbar-offcanvas offcanvas offcanvas-lg borderless" id="navbar-collapsable-menu">
              <div className="container-fluid">
                <div className="row">
                  <div className="container">

                    <ul className="nav navbar-nav">

                      {navitems.map((navitems) => <NavDropdown heading={navitems.heading} links={navitems.links}/>)}

                      <SearchBar/>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
        </nav>
      </header>
  )

};

const ToggleNav = () => (
       <div class="navbar-header hidden-lg hidden-md z-depth-2">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsable-menu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand waves-effect waves-light" href="#"></a>
        </div>
);

渲染<ToggleNav/>时，我会在导航栏上方获得切换导航按钮，而不是应该在导航栏的右侧获得切换按钮（检查屏幕截图）该如何解决？我认为<ToggleNav/>

有问题

我指的是：https://mdbootstrap.com/components/navbar/

如果您调整此演示的窗口大小-> https://mdbootstrap.com/previews/docs/latest/html/navbar/navbar-fixed-top.html，那么您会看到可以切换的按钮，我想做类似的事情。