Add item at the bottom of a drawer component

Question

How would I place an entry of a drawer component at the bottom? (instead of consecutively from the top)

For example, I want the help item to be at the bottom of the drawer navigation.

Here is the code I have so far

     <Drawer
        variant="persistent"
        anchor="left"
      >
        <List>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>


          <ListItem
            style={{ position: "absolute", bottom: "0" }}
            dense
            button
            component={Link}
            to={"/help"}
          >
            <ListItemIcon>{<HelpIcon />}</ListItemIcon>
            <ListItemText primary={"Help"} />
          </ListItem>
        </List>
      </Drawer>

There have been some past posts about this topic but nothing related to using list components to build drawer components.

Answer 1

I found a solution!! Create a separate list and add style={{ position: "absolute", bottom: "0" }} to its style prop.