Description:

I am experiencing an issue with the MDB React Navbar Toggler in my project. When I click the toggler button on smaller screens (below the expand="lg" breakpoint), the menu does not expand as expected. However, the toggler does trigger the showNav state change, as confirmed by console.log.

Expected Behavior:

When clicking the hamburger icon, the navbar menu should expand and become visible on small screens.

Actual Behavior:

The toggler button registers the click (verified via logging).

The showNav state updates correctly (from false to true).

Despite this, the menu does not appear on the screen.

What I have checked so far:

✔️ The showNav state correctly updates (verified via console.log).

✔️ The correct MDB styles are imported (import 'mdb-react-ui-kit/dist/css/mdb.min.css';).

✔️ The tag is present in index.html.

✔️ There are no custom CSS rules overriding .collapse or .show.

✔️ The project is using mdb-react-ui-kit@9.0.0 and react@18.3.1 (verified via npm ls).

Code Sample:

import React, { useState, useEffect } from 'react';
import {
    MDBNavbar, 
    MDBContainer, 
    MDBIcon, 
    MDBNavbarNav, 
    MDBNavbarItem, 
    MDBNavbarLink, 
    MDBNavbarToggler, 
    MDBNavbarBrand, 
    MDBCollapse 
    } from 'mdb-react-ui-kit';
function App() {
  const [showNav, setShowNav] = useState(false);
  useEffect(() => {
    console.log('showNav changed ->', showNav);
  }, [showNav]);
 return (
<MDBNavbar expand='lg' light bgColor='light'>
  <MDBContainer fluid>
    <MDBNavbarBrand href='#'>MDB React App</MDBNavbarBrand>
    <MDBNavbarToggler onClick={() => setShowNav(!showNav)}>
      <MDBIcon icon='bars' fas />
    </MDBNavbarToggler>

    <MDBCollapse navbar show={showNav}>
      <MDBNavbarNav className='justify-content-center'>
        <MDBNavbarItem>
          <MDBNavbarLink href='#'>Home</MDBNavbarLink>
        </MDBNavbarItem>
        <MDBNavbarItem>
          <MDBNavbarLink href='#'>Link</MDBNavbarLink>
        </MDBNavbarItem>
      </MDBNavbarNav>
    </MDBCollapse>
  </MDBContainer>
</MDBNavbar>  ); }
export default App;

Questions:

1.Are there any known issues with MDBCollapse or MDBNavbarToggler in mdb-react-ui-kit@9.0.0?

2.Are there additional required dependencies for the toggler to function correctly?

3.Could there be a problem with the way styles are applied to .collapse and .show in MDB v9?