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


);
}

Bắt đầu bằng cách tái hiện ví dụ VerticalTabs được cung cấp, bao gồm cả lỗi đã được báo cáo khi component được export. Issue không nêu file nào trong repository, test, phiên bản React hoặc phiên bản Material UI, vì vậy bước tiếp theo là xác định vị trí của ví dụ liên quan và thiết lập một trường hợp có thể tái hiện; công việc được xem là hoàn tất khi lỗi invalid-hooks được giải thích và ví dụ bị ảnh hưởng hoạt động chính xác.