I have header , sidenav and main components. Clicking on the icon in the header, sidenav should open. The page goes dark but the sidenav from left doesn’t appear.Also I want to push the main content to the right as the sidenav opens. For testing I added in the sidenav, this opens as I click on the header icon.But I am not able to achieve what I really want , is to open the sidenav as I click on the header icon.
header.tsx

export default function Header() {

  const [open, setOpen] = React.useState(false);

  const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
  };
return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
            onClick={toggleDrawer(true)}
          >                   
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>          
          <Drawer
           open={open} 
           onClose={toggleDrawer(false)} 
            >
                <SideNav/>                 
          </Drawer>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

Sidenav.tsx

   export default function SideNav() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
  };

  const DrawerList = (
    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
      <List>
        {['SideInbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    
    </Box>
  );
  return (
    <div>
      {/* <Button onClick={toggleDrawer(true)}>Open drawer</Button> */}
      <Drawer 
        open={open} 
        onClose={toggleDrawer(false)}
        variant="persistent"
        anchor="left"
        >
       {DrawerList}
      </Drawer>
    </div>
  );
}