I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any issues. However, I want to get rid of the backshadow. The API documentation suggests using hideBackDrop={true} for this purpose, and it does indeed remove the backshadow. But now, if I click outside of the drawer on the map, the drawer doesn't close as expected.
<SwipeableDrawer
disableEnforceFocus={disableAutoFocus}
disableAutoFocus={disableAutoFocus}
anchor="bottom"
open={isOpen}
onClose={onClose}
onOpen={onOpen}
hideBackdrop={hideBackdrop}
>
<Box role="presentation">{children}</Box>
</SwipeableDrawer>