MaterialUI Tabs not showing

Question

I am trying to create a simple Navbar with materialui. I am using the tab component. I have a NavBar component that I insert into my app. The navbar component is not showing up at all. I followed the examples on the materialui docs but I can't figure out why the tabs are not showing.

export default function NavBar(props)
{
    <BoxSx widith={300} height={300}>
        <Tabs
            indicatorColor='primary'
            textColor='primary'
            orientation='vertical'
            sx={{borderRight: 1, borderColor: 'primary.dark'}}
        >
            <Tab label='Placeholder 1'></Tab>
            <Tab label='Placeholder 1'></Tab>
            <Tab label='Placeholder 1'></Tab>
            <Tab label='Placeholder 1'></Tab>
            <Tab label='Placeholder 1'></Tab>
            <Tab label='Placeholder 1'></Tab>
            <Tab label='Placeholder 1'></Tab>
        </Tabs>
    </BoxSx>
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={2}>
        <Grid item xs={3}>
          <NavBar></NavBar>
        </Grid>
        <Grid item xs={3}>
          <BoxSx width={300} height={300}></BoxSx>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}