react.jsにて問い合わせフォームを作成したい

reactでwebサイトの作成をしています。その中で問い合わせフォームを作成したく、以下のサイトを参考にしてコードを書きました。
しかし、エラーは吐かれないのですが、画面が白くなってしまいますので原因があれば教えてほしいです。
なお、アロー関数内にpタグのみを記入すると普通に表示されるので、アロー関数内が間違えていると思うのですが、どこが間違えているかがわかりません...
https://copel-blog.com/react-final-form-practice/

コードは以下の通りです。

react
1import { makeStyles, TextField } from '@mui/material';
2import { Button } from 'bootstrap';
3import React, { useCallback, useState } from 'react'
4
5
6const useStyles = makeStyles({
7  button: {
8    backgroundColor: "#4dd0e1",
9    color: "#333",
10    height: 48,
11    marginTop: 16,
12    marginButton: 24,
13    width: 180
14  }
15});
16
17export const Contact = () => {
18  const classes = useStyles();
19  const [name, setName] = useState("");
20  const [hasNameError, setHasNameError] = useState(false);
21  const [email, setEmail] = useState("");
22  const [hasEmailError, setHasEmailError] = useState(false);
23
24  const inputName = useCallback(
25    (event) => {
26      const inputValue = event.target.value;
27      const isEmpty = inputValue === "";
28      setName(inputValue);
29      setHasNameError(isEmpty);
30    },
31    [setName, setHasNameError]
32  );
33  const inputEmail = useCallback(
34    (event) => {
35      const inputValue = event.target.value;
36      const isEmpty = inputValue === "";
37      setEmail(inputValue);
38      setHasEmailError(isEmpty);
39    },
40    [setEmail, setHasEmailError]
41  );
42
43  const handleSubmit = (e) => {
44    e.preventDefault();
45    const isEmptyName = name === "";
46    const isEmptyEmail = email === "";
47
48    if (isEmptyName && isEmptyEmail) {
49      setHasNameError(true);
50      setHasEmailError(true);
51    } else if (isEmptyName) {
52      setHasNameError(true);
53    } else if (isEmptyEmail) {
54      setHasEmailError(true);
55    } else {
56      console.log("Name: " + name);
57      console.log("Email: " + email);
58    }
59  };
60
61  return (
62    
63    <form
64      onSubmit={(event) => {
65        handleSubmit(event);
66      }}
67      noValidate
68    >
69      <div className="App">
70        <TextField
71          error={hasNameError}
72          fullWidth={true}
73          label={"名前"}
74          margin="dense"
75          multiline={false}
76          required={true}
77          rows={1}
78          value={name}
79          type={"text"}
80          onChange={inputName}
81          helperText={hasNameError ? "名前を入力してください。" : ""}
82        />
83        <TextField
84          error={hasEmailError}
85          fullWidth={true}
86          label={"メールアドレス"}
87          margin="dense"
88          multiline={false}
89          required={true}
90          rows={1}
91          value={email}
92          type={"email"}
93          onChange={inputEmail}
94          helperText={hasEmailError ? "メールアドレスを入力してください。" : ""}
95        />
96        <Button className={classes.button} varient="contained" type="submit">
97          送信する
98        </Button>
99      </div>
100    </form>
101  );
102}

maisumakun

2022/05/24 14:16

コンソールにエラーは出ていませんか？

garbin

2022/05/24 14:38

確認忘れてました。エラー出てました。 makeStyles is no longer exported from @mui/material/styles. You have to import it from @mui/styles.とあったので、makeStylesを@mui/stylesからインポートすることはわかったのですが、そこで色々いじってたところ、以下のようなエラーが出てしまい、また解決策がわからなくなりました... エラー：ERROR in ./node_modules/@mui/material/index.js Module build failed (from ./node_modules/source-map-loader/dist/cjs.js): Error: ENOENT: no such file or directory,