Drawer issues with lazy loaded components

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-drawer-with-lazy-components-yyg5n0

Steps:

1. click the button in the page to open the drawer
2. click a link in drawer to change route
3. sometimes the drawer won't close anymore

Current behavior 😯

Sometimes the Drawer seems to ignore the open prop and stays opened even if set to false.

Expected behavior 🤔

The Drawer should close if the open prop equals true

Context 🔦

We use the drawer as a sidebar navigation, each children is a react router <Link> pointing to a dedicated <Route> which will render a React.lazy loaded component.

The issues is not present using standard component imports.

Your environment 🌎

  System:
    OS: macOS 13.3
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.121
    Edge: Not Found
    Firefox: 107.0
    Safari: 16.4