Material-UI Vertical tabs hidden by Grid Contents - css

Question

When I add grid and grid items, the vertical tabs get covered like this: image1, I want the contents to achieve this: image2. Any help would be so greatly appreciated! I just started with Material UI.
This is my code:
import React, { useState, useEffect } from "react";
import { Box, Grid, Tab, Tabs, Typography } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import Product from "../components/Product";
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`vertical-tabpanel-${index}`}
aria-labelledby={`vertical-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
function a11yProps(index) {
return {
id: `vertical-tab-${index}`,
"aria-controls": `vertical-tabpanel-${index}`,
};
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
display: "flex",
height: 500,
},
tabs: {
borderRight: `1px solid ${theme.palette.divider}`,
},
productsContainer: {
paddingTop: "20px",
paddingLeft: "50px",
paddingRight: "50px",
margin: "auto",
},
}));
const HomeScreen = () => {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
//UI
const classes = useStyles();
return (
<React.Fragment>
<div className={classes.root}>
<Tabs
orientation="vertical"
variant="scrollable"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
>
<Tab label="All Items" {...a11yProps(0)} />
<Tab label="Hand" {...a11yProps(1)} />
<Tab label="Skin" {...a11yProps(2)} />
<Tab label="Face" {...a11yProps(3)} />
<Tab label="Body" {...a11yProps(4)} />
<Tab label="Fragrance" {...a11yProps(5)} />
<Tab label="Home" {...a11yProps(6)} />
</Tabs>
<TabPanel value={value} index={0}>
<Grid container spacing={4} className={classes.productsContainer}>
{products.map((product) => (
<Grid item xs={12} sm={10} md={6} lg={4} key={product._id}>
<Product product={product} />
</Grid>
))}
</Grid>
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
<TabPanel value={value} index={3}>
Item Four
</TabPanel>
<TabPanel value={value} index={4}>
Item Five
</TabPanel>
<TabPanel value={value} index={5}>
Item Six
</TabPanel>
<TabPanel value={value} index={6}>
Item Seven
</TabPanel>
</div>
</React.Fragment>
);
};
export default HomeScreen;