ローカルホスト3000を立ち上げても、画面が真っ白で表示が出ないを解決したい。

Uncaught TypeError: Cannot read properties of undefined (reading 'main')
    at bundle.js:48508:44
    at bundle.js:58101:18
    at handleInterpolation (bundle.js:2400:24)
    at serializeStyles (bundle.js:2526:15)
    at bundle.js:2880:91
    at bundle.js:1693:12
    at renderWithHooks (bundle.js:85860:22)
    at updateForwardRef (bundle.js:87882:24)
    at beginWork (bundle.js:89870:20)
    at HTMLUnknownElement.callCallback (bundle.js:74810:18)
react-dom.development.js:20085 The above error occurred in the <MuiIconButtonRoot> component:

    at http://localhost:3000/static/js/bundle.js:1692:66
    at IconButton (http://localhost:3000/static/js/bundle.js:48536:83)
    at div
    at http://localhost:3000/static/js/bundle.js:1692:66
    at Toolbar (http://localhost:3000/static/js/bundle.js:54930:82)
    at header
    at http://localhost:3000/static/js/bundle.js:1692:66
    at Paper (http://localhost:3000/static/js/bundle.js:52335:82)
    at http://localhost:3000/static/js/bundle.js:1692:66
    at AppBar (http://localhost:3000/static/js/bundle.js:44467:83)
    at div
    at http://localhost:3000/static/js/bundle.js:1692:66
    at Box (http://localhost:3000/static/js/bundle.js:57902:72)
    at Header (http://localhost:3000/static/js/bundle.js:825:81)
    at div
    at App
    at Routes (http://localhost:3000/static/js/bundle.js:98606:5)
    at AuthProvider (http://localhost:3000/static/js/bundle.js:160:5)
    at Router (http://localhost:3000/static/js/bundle.js:98539:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:98019:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
bootstrap:27 Uncaught TypeError: Cannot read properties of undefined (reading 'main')
    at bundle.js:48508:44
    at bundle.js:58101:18
    at handleInterpolation (bundle.js:2400:24)
    at serializeStyles (bundle.js:2526:15)
    at bundle.js:2880:91
    at bundle.js:1693:12
    at renderWithHooks (bundle.js:85860:22)
    at updateForwardRef (bundle.js:87882:24)
    at beginWork (bundle.js:89870:20)
    at HTMLUnknownElement.callCallback (bundle.js:74810:18)

{
  "name": "redux_app_3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/material": "^5.3.1",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^9.6.5",
    "framer-motion": "^6.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
//import { Provider } from "react-redux";
//import store from "./redux/store";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./auth/Login";
import SignUp from "./auth/SignUp";
import { AuthProvider } from "./auth/AuthProvider";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      {/* <Provider store={store}> */}
      <AuthProvider>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<SignUp />} />
        </Routes>
      </AuthProvider>
      {/* </Provider> */}
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

//import { useState } from "react";
//import DisplayTodos from "./components/DisplayTodos";
import Header from "./components/Header";
//import Todos from "./components/Todos";
import { motion } from "framer-motion";

function App() {
  //const [myCount, setMyCount] = useState(0);

  return (
    <div className="App">
      <Header />
      <div style={{ textAlign: "center" }}>
        <motion.h1
          initial={{ y: -200 }}
          animate={{ y: 0 }}
          transition={{ type: "spring", duration: 0.5 }}
          whileHover={{ scale: 1.1 }}
        >
          Money Transfer App
        </motion.h1>
        <motion.div
          initial={{ y: 1000 }}
          animate={{ y: 0 }}
          transition={{ type: "spring", duration: 1 }}
        >
          {/* <Todos count={myCount} setCount={setMyCount} /> */}
          {/* <DisplayTodos count={myCount} setCount={setMyCount} /> */}
        </motion.div>
      </div>
    </div>
  );
}

export default App;

import React from "react";
import {
  AppBar,
  Box,
  Button,
  Toolbar,
  Typography,
  IconButton,
} from "@mui/material";
import { useNavigate } from "react-router-dom";

const Header = () => {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate("/login");
  };
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inheriDefa"
            aria-label="menu"
            sx={{ mr: 2 }}
          ></IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            React課題③
          </Typography>
          <div style={{ flexGrow: 1 }}></div>
          <Button variant="text" color="inherit" onClick={handleClick}>
            SignOut
          </Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
};
export default Header;