I'm creating a React Js app using MUI as the core component and React Leaflet as the map container.

There is some extra blank space (a UX issue) with the React Leaflet map after when the MUI Drawer is collapsed.

Here is the initial condition (the MUI Drawer component is expanded)

Here is the screenshot after clicking the collapse button for the MUI Drawer component from the MUI AppBar component (the extra blank space appears on the right of the screen)

Why does this happen and what is the solution for this issue?

Here is the code and the playground: https://codesandbox.io/s/stackoverflow-leaflet-map-with-mui-drawer-9c6ner

Note:

1. I have to use react-leaflet v3 and react v17 dependencies because in my real project, I have to use react-leaflet-markercluster v3 dependency which is not supported yet with react-leaflet v4 and react v18
2. If this issue isn't reproducible in your browser, please try to enlarge your codesandbox browser and then try again.