Estoy creando una aplicación React Js utilizando MUI como componente central y React Leaflet como contenedor de mapas.

Hay un espacio en blanco adicional (un problema de UX) con el mapa de React Leaflet después de que el Drawer MUI esté colapsado.

Aquí está la condición inicial (el componente Drawer MUI está expandido)

Aquí está la captura de pantalla después de hacer clic en el botón de colapso para el componente MUI Drawer desde el componente MUI AppBar (el espacio en blanco adicional aparece a la derecha de la pantalla)

¿Por qué sucede esto y cuál es la solución para este problema?

Aquí está el código y el patio de recreo: https://codesandbox.io/s/stackoverflow-leaflet-map-with-mui-drawer-9c6ner

Nota:

1. Tengo que usar las dependencias react react-leaflet leaflet v3 y react v17 porque en mi proyecto real, tengo que usar la dependencia react-leaflet-markercluster v3 que aún no es compatible con react-leaflet leaflet v4 y react v18
2. Si este problema no se puede reproducir en su navegador, intente agrandar su navegador de codesandbox y vuelva a intentarlo.