ReactのHook Callエラー対処法を教えて下さい。

前提・実現したいこと

react初心者です。Material UIを使用してアプリを作成しています。

発生している問題・エラーメッセージ

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Componentのコードを書いてサイトを更新していたら突然表示されるようになりました。

該当のソースコード

React
1import React from 'react';
2import { makeStyles } from '@material-ui/core/styles';
3import Drawer from '@material-ui/core/Drawer';
4import CssBaseline from '@material-ui/core/CssBaseline';
5import HomeIcon from '@material-ui/icons/Home';
6import SettingsIcon from '@material-ui/icons/Settings';
7import List from '@material-ui/core/List';
8import Divider from '@material-ui/core/Divider';
9import ListItem from '@material-ui/core/ListItem';
10import ListItemIcon from '@material-ui/core/ListItemIcon';
11import ListItemText from '@material-ui/core/ListItemText';
12import NotificationsIcon from '@material-ui/icons/Notifications';
13import MailIcon from '@material-ui/icons/Mail';
14
15const drawerWidth = 240;
16
17const useStyles = makeStyles((theme) => ({
18  root: {
19    display: 'flex',
20  },
21  appBar: {
22    width: `calc(100% - ${drawerWidth}px)`,
23    marginLeft: drawerWidth,
24  },
25  drawer: {
26    width: drawerWidth,
27    flexShrink: 0,
28  },
29  drawerPaper: {
30    width: drawerWidth,
31  },
32  content: {
33    flexGrow: 1,
34    backgroundColor: theme.palette.background.default,
35    padding: theme.spacing(3),
36  },
37  // necessary for content to be below app bar
38  toolbar: theme.mixins.toolbar,
39  
40}));
41
42export default function PermanentDrawerLeft() {
43  const classes = useStyles();
44
45  return (
46    <div className={classes.root}>
47      <CssBaseline />
48      {/* サイドバー */}
49      <Drawer
50        className={classes.drawer}
51        variant="permanent"
52        classes={{
53          paper: classes.drawerPaper,
54        }}
55        anchor="left"
56      >
57        <div className={classes.toolbar} />
58        <Divider />
59        <List>
60          {['ダッシュボード', 'メッセージ',].map((text, index) => (
61            <ListItem button key={text}>
62              <ListItemIcon>{index % 2 === 0 ? <HomeIcon /> : <MailIcon />}</ListItemIcon>
63              <ListItemText primary={text} />
64            </ListItem>
65          ))}
66        </List>
67        <Divider />
68        <List>
69          {['設定', 'お知らせ'].map((text, index) => (
70            <ListItem button key={text}>
71              <ListItemIcon>{index % 2 === 0 ? <SettingsIcon /> : <NotificationsIcon />}</ListItemIcon>
72              <ListItemText primary={text} />
73            </ListItem>
74          ))}
75        </List>
76      </Drawer>
77      {/* コンテンツ */}
78      <main className={classes.content}>
79
80        {/*カード*/}
81        {/* <Grid container spacing={5} alignItems="flex-end">
82          <TopCard></TopCard>
83        </Grid> */}
84        {/* お知らせ欄 */}
85        </main>
86    </div>
87  );
88}