React - No errors but blank page

Question

Webpack compiled successfully, yet the page is blank.

import React from "react";
import { BrowserRouter as Routes, Route } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";



import Navbar from "./components/Navbar";
import ExercisesList from "./components/ExercisesList";
import EditExercise from "./components/EditExercise";
import CreateExercise from "./components/CreateExercise";
import CreateUser from "./components/CreateUser";

function App() {
  return (
      <Routes>
        <div className="container">
          <Navbar />
          <br />
          <Route path="/" exact component={ExercisesList} />
          <Route path="edit/:id" component={EditExercise} />
          <Route path="create" component={CreateExercise} />
          <Route path="/user" component={CreateUser} />
        </div>
      </Routes>
  );
}

export default App;

The message in the console saying that Route cannot be rendered directly, so I wrapped it in the Routes but the page remains blank. What am I missing here?