Mui Modal state is closed but is still sproadicaly shows on screen after deployment

[OmerNaveh]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

• Refresh on the home screen
• Open the modal elements and click on the button that should close both models and navigate user

Current behavior 😯

The drawer and dialog elements are still visible (due to MUI inlineStyling) when their open state is closed

Expected behavior 🤔

The two elements should not be visible due to their open state being false. No inline styling should appear and the elements should be visible in the html tree

Context 🔦

I use a SwipeableDrawer to show my menu side content Each Item there is clickable and opens a Dialog element which is full screen. Pressing a button inside the dialog should close both the dialog and the drawer elements and navigate the user to a different route. This works perfect locally and even works 95% of the times in deployment But when the component is initialized (after several refreshes) - the two modal(drawer+dialog) elements sometimes appear open and can only dissapear when a user refreshes or navigates back using the browser back button- After this happening once it will not happen again in the same tab.

The two modal elements have an aria-label= "hidden", but their inlineStyling is what causes them to stay open- I didnt apply inline styling BTW.

The state changes are correct and are not whats affecting the visibility of the elements.... These are the tags used for the elements (I'm not putting the full code because it is long and divided to multi components)-

Dialog Element - the open variable is the the state in charge of opening this component

 SwipableDrawer element - here the showHamburgerMenu is the state in chrage of opening the component
  <SwipeableDrawer
    sx={{
      "& .MuiDrawer-paper": {
        backgroundColor: "#FFFFFF",
      },
      "& .MuiListItem-gutters": {
        marginBlock: "20px",
      },
      "& .MuiListItemIcon-root": {
        justifyContent: "center",
      },
      "& .css-3z7zsp-MuiTypography-root": {
        fontWeight: 500,
      },
    }}
    anchor={Anchor.LEFT}
    open={showHamburgerMenu}
    onClose={closeDrawer}
    onOpen={openDrawer}
  >
  
  
  This is an image showing the html tree with the two divs being the modal elements(drawer and dialog)

Your environment 🌎

Deployed in heroku using react and typescript

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.