Содержимое компонента React не отображается или не найдено

Я впервые создаю интерфейс с React и только что добавил маршруты. С тех пор страницы больше не отображаются правильно, и я не знаю, где ошибка.

Просмотр при переходе на главную страницу

Содержимое компонента не загружается

Вот мой App.js с маршрутами

import './App.css';
import React, { useState } from 'react';
import { Route, Routes, Switch } from "react-router-dom";
import homePage from './Pages/home';
import loginPage from './Pages/login';
import galleryPage from './Pages/gallery';

function App() {
  return (
    <>
      <Routes>
        <Route path='/' exact element = {<homePage />}/>
        <Route path='/login' element = {<loginPage />}/>
        <Route path='/gallery' element = {<galleryPage />}/>
        <Route path='/dev' element = {<test />}></Route>
      </Routes>
    </>
  );
}

export default App;

Вот мой index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

Вот мой дом.js

import Navbar from "../Components/Navigation/Navbar";
import Calendartsc from "../Components/Calendar/calendar";
import Events from "../Components/Events/Events";
import React from "react";
import '../index.css';
import './home.css'

let inhalt = "Temporary test content"

function homePage() {
  return (
    <>
      <div className = "App">
        <title>Vereinswebsite</title>
        <Navbar />
        <div className='card'>
          <h2>Wilkommen</h2>
          <div className = "flex-container">
            {inhalt}
          </div>
          <div className = "flex-container">
            <div className='flex-child magenta'>
              <div className='card'>
                <Calendartsc />
              </div>
            </div>
            <div className='flex-child green'>
              <div className='card'>
                <Events />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default homePage;

Мой пакет.json

{
 "name": "test",
 "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/react": "^18.0.26",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-calendar": "^4.0.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.2",
    "react-scripts": "^2.1.3",
    "web-vitals": "^2.1.4"
 },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
     ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Я неправильно называю компоненты?

Я хочу, чтобы компоненты React отображались на правильных маршрутах. В настоящее время отображается только тег HTML, но не контент, который я сохранил в функции в качестве возврата.