I am rendering Text with Tabs on one row. I have dynamic options array. I want to show Text and tabs on center of screen which i achieve but somehow on small screen tabs never show scroller. Options are dynamic so i can apply responsive queries. Here is My code

import * as React from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";

const dynamicItems = [
  "Item1",
  "Item2",
  "Item3",
  "Item4",
  "Item5",
  "Item6",
  "Item7",
  "Item8",
  "Item9"
];
export default function ScrollableTabsButtonAuto() {
  const [value, setValue] = React.useState(0);

  return (
    <Grid
      container
      justifyContent="center"
      wrap="nowrap"
      alignItems="center"
      sx={{ gap: "15px" }}
    >
      <Grid item>
        <Typography sx={{ fontWeight: "bold" }}>Options</Typography>
      </Grid>
      <Grid item>
        <Tabs
          value={value}
          variant="scrollable"
          scrollButtons="auto"
          aria-label="scrollable auto tabs example"
        >
          {dynamicItems.map((item, i) => (
            <Tab label={item} key={i} />
          ))}
        </Tabs>
      </Grid>
    </Grid>
  );
}