The mouse scroll for the main content is not working when I open the side-drawer. How do I go with this?

Question

On opening the sidebar the main content scroll does not work. Also some fields such as select options, search bar do not work when the sidebar is open. I have added the main content in the routes from where it is being loaded. The scroll, above listed functions work fine when the side-drawer is closed. I am relatively new to material ui + react and tried to workaround with some tips from other sources but I am stuck with this for a long time.

  <>
      <Box sx={{ display: "flex" }}>
        <AppBar
          sx={{ backgroundColor: "rgb(19, 71, 129)" }}
          position="fixed"
          className={classes.appBar}
        >
          <Toolbar align="center">
            <IconButton
              color="inherit"
              onClick={handleMenuClick}
              edge="start"
              className={clsx(classes.menuButton)}
            >
              <MenuIcon />
            </IconButton>
          </Toolbar>
        </AppBar>
        <Drawer
          className={classes.drawer}
          variant="temporary"
          open={open}
          transitionDuration={{
            enter: transitionDuration,
            exit: transitionDuration,
          }}
          classes={{
            paper: classes.drawerPaper,
          }}
        >
          <Toolbar>
            <IconButton
              sx={{ marginLeft: "auto" }}
              onClick={handleMenuClick}
              edge="start"
              className={clsx(classes.menuButton)}
            >
              <ChevronLeftIcon />
            </IconButton>
          </Toolbar>
          <div className={classes.drawerContainer}>
            {/* //Drawer Items */}

            <DrawerItems open={open} isAdmin={isAdmin} />
          </div>

          {/* Logout */}

          <LightTooltip title="Logout" placement="top">
            <IconButton
              sx={{ marginTop: "auto" }}
              onClick={handleLogout}
              color="error"
            >
              <ExitToAppIcon />
            </IconButton>
          </LightTooltip>
        </Drawer>
        {/* Routes for drawer components */}
        <main
          className={clsx(classes.content, {
            [classes.contentShift]: open,
          })}
        >
          <Routes>
            <Route path="dashboard" element={<Dashboard />} />
            <Route path="employees" element={<Employees />} />
            <Route path="payroll" element={<Payroll />} />
            <Route path="projects" element={<Projects />} />
            <Route path="leaves" element={<Leaves />} />
            <Route path="leavesemp" element={<LeavesEMP />} />
            <Route path="empattendance" element={<EMPAttendance />} />
            <Route path="hrattendance" element={<HRAttendance />} />
          </Routes>
        </main>
      </Box>
    </>

This is the style

drawerContainer: {
    overflow: "auto",
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: transitionDuration,
    }),
    marginLeft: 0,
  },
  contentShift: {
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.easeOut,
      duration: transitionDuration,
    }),
    marginLeft: drawerWidth,
  },

Answer 1

I was in a hurry so I used a "persistent" mui drawer variant and solved the problem. I will still be looking to solve this particular problem though.