Appbar and Drawer transitions not working - reactjs

Question

To make this layout I am using the MUI Dashboard example.
https://github.com/mui/material-ui/blob/v5.11.7/docs/data/material/getting-started/templates/dashboard/Dashboard.js
I'm not using styled as engine, but styled-components.
const MainLayout = () => {
const themeAux = useTheme();
const [open, setOpen] = useState(false);
const toggleDrawer = () => setOpen(!open);
const DrawerContent = () => (
<Fragment>
<Toolbar
sx={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
px: [1],
}}
>
<IconButton onClick={toggleDrawer}>
<ChevronLeft />
</IconButton>
</Toolbar>
<Divider />
<List component={'nav'}>
<ListItemButton component={'a'} href={''}>
<ListItemIcon>
<Drafts />
</ListItemIcon>
<ListItemText primary={'Main'} />
</ListItemButton>
</List>
</Fragment>
);
const TopBar = () => (
<AppBar
position={'absolute'} // fixed
sx={{
zIndex: (theme) => theme.zIndex.drawer + 1,
transition: (theme) =>
theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
ml: { sm: drawerWidth },
width: { sm: `calc(100% - ${drawerWidth}px)` },
transition: (theme) =>
theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}}
>
<Toolbar>
<IconButton
sx={{ mr: 2, ...(open && { display: { sm: 'none' } }) }}
edge={'start'}
onClick={toggleDrawer}
>
<Menu />
</IconButton>
<Typography component={'h4'} variant={'h4'} noWrap sx={{ flexGrow: 1 }}>
HEADERS
</Typography>
</Toolbar>
</AppBar>
);
const LargeDrawer = () => (
<Drawer
variant={'permanent'}
open={open}
sx={{
'& .MuiDrawer-paper': {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: (theme) =>
theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
boxSizing: 'border-box',
...(!open && {
overflowX: 'hidden',
transition: (theme) =>
theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: (theme) => ({ xs: theme.spacing(7), sm: theme.spacing(9) }),
}),
},
}}
>
<DrawerContent />
</Drawer>
);
return (
<Box
sx={{
display: 'flex',
}}
>
<TopBar />
<LargeDrawer />
<Box
component={'main'}
sx={{
flexGrow: 1,
height: '100vh',
overflow: 'auto',
}}
>
<Toolbar />
<Container maxWidth={'lg'} sx={{ my: 4 }}>
<Outlet />
</Container>
</Box>
</Box>
);
};
export default MainLayout;
What am I doing wrong, that causes the transitions not to work when opening and closing the drawer?