Sidebar overlaps with profile box

[Victor-Timi]

The box that includes the profile image, overlaps with the other lists in the sidebar. But for User experience, I was able to make them work independently

Here is the Before

And here is the after.

Here are the changes I made:
I made the Box position sticky rather than absolute so that the other list could flow independently without colliding with the profile box. And added some flex layout on the other boxes

const Sidebar = ({
  user,
  drawerWidth,
  isSidebarOpen,
  setIsSidebarOpen,
  isNonMobile,
}) => {
  // ...

  return (
    <Box component="nav">
      {isSidebarOpen && (
        <Drawer
          // ...
        >
          <Box width="100%" display="flex" flexDirection="column" sx={{ position: "relative" }}>
            {/* ... */}

            <List sx={{ flex: 1, overflowY: "auto" }}>
              {/* ... */}
            </List>

            <Box className="profileImage" sx={{
              position: "sticky",
              bottom: 0,
              zIndex: 1,
              backgroundColor: theme.palette.background.alt,
              mt: "auto",
              py: "1rem",
              borderTop: `1px solid ${theme.palette.secondary[200]}`,
            }}>
              {/* ... */}
            </Box>
          </Box>
        </Drawer>
      )}
    </Box>
  );
};

export default Sidebar;