Invalid use of Hooks Error

When i Run this bunch of code or Specifically when i export the verticals tabs component it throws error (Invalid use of hooks)
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

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 && (

{children}

)}

);
}

TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};

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: 224,
},
tabs: {
borderRight: 1px solid ${theme.palette.divider},
},
}));

export default function VerticalTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);

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

return (

<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
<Tab label="Item Four" {...a11yProps(3)} />
<Tab label="Item Five" {...a11yProps(4)} />
<Tab label="Item Six" {...a11yProps(5)} />
<Tab label="Item Seven" {...a11yProps(6)} />


Item One


Item Two


Item Three


Item Four


Item Five


Item Six


Item Seven


);
}

まず、提供された VerticalTabs の例を再現します。これには、コンポーネントをエクスポートしたときに報告された失敗も含まれます。issue には、リポジトリのファイル、テスト、React のバージョン、または Material UI のバージョンが記載されていないため、次のステップは該当する例の場所を特定し、再現可能なケースを確立することです。invalid-hooks エラーが説明され、影響を受けた例が正しく動作すれば完了です。