Issue with MUI AppBar and SideBar(MUI Drawer)

Question

Anyone please help to resolve this MUI and Tailwind issue as I'm facing below for adjusting the AppBar and MUI Menu Drawer.

In this image siderbar is hidded in the names and you can see the Header(MUI Appbar is hidden inside the Drawer on left side) In this image also same the menu expanded but still the Header(AppBar is still hidden behind the Drawer)

From the First images: In this image siderbar is hidded in the names and you can see the Header(MUI Appbar is hidden inside the Drawer on left side.

From the Second Image: In this image also same the menu expanded but still the Header(AppBar is still hidden behind the Drawer

I need to the Header and Drawer should be display like inline but I have tried with many ways using Tailwind to madify the MUI structure but didn't get result. Could someone help on this.

Header.tsx

<AppBar className="w-[85%] bg-white rounded-lg m-2">
    <Toolbar></Toolbar>
 </AppBar>

 <Drawer variant="permanent" open={open}>
      <DrawerHeader>
        <IconButton className="h-14 w-14 my-0" onClick={handleDrawerOpen}>
          Logo
        </IconButton>
      </DrawerHeader>
      <List>
        {isSuccess &&
          menuData &&
          menuData.data &&
          menuData.data.menu.map((item: { name: string }, index: number) => {
            return (
              <ListItem key={index}>
                <ListItemButton>
                  <ListItemText primary={item.name} />
                </ListItemButton>
              </ListItem>
            );
          })}
</List

I need final image look like the below

enter image description here