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

Question

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

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

import { makeStyles, TextField } from '@mui/material';
import { Button } from 'bootstrap';
import React, { useCallback, useState } from 'react'


const useStyles = makeStyles({
  button: {
    backgroundColor: "#4dd0e1",
    color: "#333",
    height: 48,
    marginTop: 16,
    marginButton: 24,
    width: 180
  }
});

export const Contact = () => {
  const classes = useStyles();
  const [name, setName] = useState("");
  const [hasNameError, setHasNameError] = useState(false);
  const [email, setEmail] = useState("");
  const [hasEmailError, setHasEmailError] = useState(false);

  const inputName = useCallback(
    (event) => {
      const inputValue = event.target.value;
      const isEmpty = inputValue === "";
      setName(inputValue);
      setHasNameError(isEmpty);
    },
    [setName, setHasNameError]
  );
  const inputEmail = useCallback(
    (event) => {
      const inputValue = event.target.value;
      const isEmpty = inputValue === "";
      setEmail(inputValue);
      setHasEmailError(isEmpty);
    },
    [setEmail, setHasEmailError]
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    const isEmptyName = name === "";
    const isEmptyEmail = email === "";

    if (isEmptyName && isEmptyEmail) {
      setHasNameError(true);
      setHasEmailError(true);
    } else if (isEmptyName) {
      setHasNameError(true);
    } else if (isEmptyEmail) {
      setHasEmailError(true);
    } else {
      console.log("Name: " + name);
      console.log("Email: " + email);
    }
  };

  return (
    
    <form
      onSubmit={(event) => {
        handleSubmit(event);
      }}
      noValidate
    >
      <div className="App">
        <TextField
          error={hasNameError}
          fullWidth={true}
          label={"名前"}
          margin="dense"
          multiline={false}
          required={true}
          rows={1}
          value={name}
          type={"text"}
          onChange={inputName}
          helperText={hasNameError ? "名前を入力してください。" : ""}
        />
        <TextField
          error={hasEmailError}
          fullWidth={true}
          label={"メールアドレス"}
          margin="dense"
          multiline={false}
          required={true}
          rows={1}
          value={email}
          type={"email"}
          onChange={inputEmail}
          helperText={hasEmailError ? "メールアドレスを入力してください。" : ""}
        />
        <Button className={classes.button} varient="contained" type="submit">
          送信する
        </Button>
      </div>
    </form>
  );
}

Comments

[maisumakun]

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

[garbin]

確認忘れてました。エラー出てました。
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,