React MUI - ThemeProvider breaks mini drawer - reactjs

Question

I'm trying to replicate the "Mini drawer" example found on the MUI Drawer page here:
https://mui.com/components/drawers/#mini-variant-drawer
But as soon as I wrap it in a ThemeProvider, even if the referenced theme is empty the layout breaks. See below:
<ThemeProvider theme={baseTheme}>
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{
marginRight: "36px",
...(open && { display: "none" })
}}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Mini variant drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</DrawerHeader>
<Divider />
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
dolor purus non enim praesent elementum facilisis leo vel. Risus at
ultrices mi tempus imperdiet. Semper risus in hendrerit gravida
rutrum quisque non tellus. Convallis convallis tellus id interdum
velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean
sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
vivamus at augue. At augue eget arcu dictum varius duis at
consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
donec massa sapien faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
elementum integer enim neque volutpat ac tincidunt. Ornare
suspendisse sed nisi lacus sed viverra tellus. Purus sit amet
volutpat consequat mauris. Elementum eu facilisis sed odio morbi.
Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt
ornare massa eget egestas purus viverra accumsan in. In hendrerit
gravida rutrum quisque non tellus orci ac. Pellentesque nec nam
aliquam sem et tortor. Habitant morbi tristique senectus et.
Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean
euismod elementum nisi quis eleifend. Commodo viverra maecenas
accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam
ultrices sagittis orci a.
</Typography>
</Box>
</Box>
</ThemeProvider>
(Note: This code is an exact copy of the Mini drawer example on the website)
It looks like the ThemeProvider makes it so that the Drawer and the main body are overlapping instead of "pushing" each other. Removing the ThemeProvider (and going back to how the example on the MUI website was set up) instantly fixes it.
Of course, in my actual use case, I want to have a light and a dark theme, but it seems that even a single theme without any setup breaks the code.
Here's a CodeSandbox that shows how App.js and theme.js are set up:
https://codesandbox.io/s/react-mui-theme-breaks-drawer-u5sg0
Is this a bug in MUI or am I doing theming wrong?
Thank you in advance for your help.
To anyone that finds this issue later down the line:
I was importing { createTheme } from "#material-ui/core/styles".
Importing it from "#mui/material/styles" fixed the issue.