How to have multiple row tabs in Material UI Tabs

Question

I have almost 30 tabs inside Material UI Tabs, the user has to scroll two times to see all the tabs, I would like to show the tabs in two rows with scroll instead of one row with scroll, this will help the user to see most of the tabs in one glance.
How can I do something like this ?, I looked over Material UI document but i couldn't find anything useful, I tried manually giving it CSS style but I wasn't able to achieve my goal (my CSS skills are mediocre).
To show what I mean by multiple row tabs, here is a sample image :

Any help is much appreciated.

Answer 1

I did a little hack:

Use 2 different Tabs components and adjust indexes:

<Box sx={{ display: 'flex',justifyContent: 'center', flexWrap: 'wrap'}}>
    <Tabs value={value} onChange={handleChange}>
        <Tab label='Precios'/>
        <Tab label='Usuarios'/>
        <Tab label='Plan'/>
    </Tabs>
    <Tabs value={value - 3 } onChange={handleChange2}>
        <Tab label='Empleados'/>
    </Tabs>
</Box>

And manage change for this adjustment:

const handleChange = (event, newValue) => {
    setValue(newValue);
};
const handleChange2 = (event, newValue) => {
    setValue(newValue + 3);
};

You just change the number 3 for the number of tabs in your first component.

Saludos