react-router-dom v6 not displaying pages

Question

I have an app that successfully routes the url, but for some reason the pages aren't displaying under the header. I've looked at the other questions and available resources, but I'm very stuck in figuring out what I'm doing wrong. I am using react-router-dom 6.3.0

Here are my files for reference: Index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter as Router } from "react-router-dom";

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <Router>
        <App />
    </Router>
);

App.js:

import "./App.css";

import { Routes, Route } from "react-router-dom";

import Header from "./components/Header";

import Home from "./pages/Home";
import Freshman from "./pages/Freshman";
import Sophomore from "./pages/Sophomore";
import Junior from "./pages/Junior";
import Senior from "./pages/Senior";

function App() {
    return (
        <div className='app'>
            <Header />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="freshman" element={<Freshman />} />
                <Route path="sophomore" element={<Sophomore />} />
                <Route path="junior" element={<Junior />} />
                <Route path="senior" element={<Senior />} />
            </Routes>
        </div>
    );
}

export default App;

Header.js:

import React from "react";

import { Link } from "react-router-dom";

import "./Header.css";

function Header() {
    return (
        <div className="header-container">
            <Link to="/" className="header-title">
                College
            </Link>
            <nav>
                <Link to="freshman" className="nav-item">
                    Freshman
                </Link>
                <Link  to="sophomore" className="nav-item">
                    Sophomore
                </Link>
                <Link to="junior" className="nav-item">
                    Junior
                </Link>
                <Link to="senior" className="nav-item">
                    Senior
                </Link>
            </nav>
        </div>
    );
}

export default Header;

Home.js:

import React from "react";

function Home() {
    return (
        <div>
            <h1>home</h1>
        </div>
    );
}

export default Home;

All of the pages are just an tag with their title in black font. However, like I said, none of the pages are displaying even though the url is correctly routed. Any help would be much appreciated!