There's more...

When you click on any of the items in the drawer, the event handlers set the open state of your component to false. This might not be what you want and could potentially confuse your users. For example, if you're using a persistent drawer, your app probably has a button outside of the drawer that controls the visibility of the drawer. If the user clicks on a drawer item, they're probably not expecting the drawer to close.

To address this issue, your event handlers can take into consideration a variant of the Drawer component:

<List>
  <ListItem
    button
    onClick={() => setOpen(variant !== 'temporary')}
  >
    <ListItemText>Home</ListItemText>
  </ListItem>
  <ListItem
    button
    onClick={() => setOpen(variant !== 'temporary')}
  >
    <ListItemText>Page 2</ListItemText>
  </ListItem>
  <ListItem
    button
    onClick={() => setOpen(variant !== 'temporary')}
  >
    <ListItemText>Page 3</ListItemText>
  </ListItem>
</List>

Now, when you click on any of these items, the open state is only changed to false if the variant property is temporary.