bulma navbar menu open by default on mobile

I have a bulma navbar I'm manipulating with react. Below is the generated code. On desktop the menu displays correctly and opens and closes the dropdown menus as expected.

On mobile however all the dropdowns are open by default and although the class "is-active" is being added and removed when I click on the "navbar-link" the menu isn't opening and closing as expected.

<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      </a>
   </div>
   <div id="navbar" class="navbar-menu is-active">
      <div class="navbar-start">

         <div class="navbar-item has-dropdown">
            <a class="navbar-link">Data Types</a>
            <div class="navbar-dropdown">
               <div class="types">
                  Select Content
               </div>
            </div>
         </div>
      </div>
   </div>
</nav>

The "is-active" in the code above is from the burger menu opening the menu. What am I doing wrong?

I needed to add the sass

.navbar-item {
    &.has-dropdown {
      .navbar-dropdown {
        display: none;
      }
      &.is-active {
        .navbar-dropdown {
          display: block;
        }
      }
   }
}

under @mobile in my sass. Then the mobile behaves like the desktop.