I am trying to render the h1 tag when following the path '/', however, when I refresh the page the text doesn't show up. I have already switched the tags with tags as I was following an old tutorial. I am using react-router-dom v6.

HomePage.Js

import React, { Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router, Routes, Route, Link, Redirect } from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Router>
        <Routes>
          <Route path='/'>
            <h1>This is the home page</h1>
          </Route>
          <Route path='/join' element={ <RoomJoinPage /> } />
          <Route path='/create' element={ <CreateRoomPage/> } />
        </Routes>
      </Router>
    );
  }
}

App.Js

import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <HomePage />
      </div>
    );
  }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);