Material UI Tabpanel not using columns - reactjs

Question

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper,
},
title: {
[theme.breakpoints.up("sm")]: {
display: "block",
maxHeight: 125,
},
},
Alert: {
margin: theme.spacing(2),
},
Logo: {
width: 50,
height: 50,
marginRight: theme.spacing(3),
[theme.breakpoints.up("sm")]: {
width: 80,
height: 80,
},
},
}));
export default function ScrollableTabsButtonForce() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
className={classes.title}
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
aria-label="scrollable force tabs example"
>
<Tab
label="Elite Knight"
icon={<img className={classes.Logo} src={Knight} alt="Logo" />}
{...a11yProps(0)}
/>
<Tab
label="Royal Paladin"
icon={<img className={classes.Logo} src={Paladin} alt="Logo" />}
{...a11yProps(1)}
/>
<Tab
label="Master Sorcerer"
icon={<img className={classes.Logo} src={Sorcerer} alt="Logo" />}
{...a11yProps(2)}
/>
<Tab
label="Elder Druid"
icon={<img className={classes.Logo} src={Druid} alt="Logo" />}
{...a11yProps(3)}
/>
</Tabs>
</AppBar>
<Grid container justify="center" alignItems="center">
<Alert className={classes.Alert} severity="info">
For more information on how to make a purchase please click on the
desired script!
</Alert>
</Grid>
<TabPanel value={value} index={0}>
<Cards voc={0} />
</TabPanel>
<TabPanel value={value} index={1}>
<Cards voc={1} />
</TabPanel>
<TabPanel value={value} index={2}>
<Cards voc={2} />
</TabPanel>
<TabPanel value={value} index={3}>
<Cards voc={3} />
</TabPanel>
</div>
);
}
here is the cards component it loops on a table and generate cards for the other component i already declared how many columns for each screen.
no matter what i tried it keeps each card on a row, i tried display: "Flex" still same issue.
tried declaring the columns on seprate divs aswell still same issue.