Starting react with npm run start opens up to a blank page with the above error. I have a navbar where i am routing the individual list, but, after running the server, it opens to a blank page. The is an error in the console which points me to a component called fleet. but there is no much code over there to. There is a navbar where i have provided all the links and i am sure the problem is not coming from there.

fleet code

/** @format */

import React from "react";

class FleetPage extends React.Component {
  render() {
    return <h2>fleet</h2>;
  }
}
export default FleetPage;

app.js code

import "./App.css";
import HomePage from "./components/pages/homePage";
import routes from "./configs/route";
import NavBar from "./components/navBar";
import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <HomePage />
      <NavBar />
      <Routes>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} element={route.component} />
        ))}
      </Routes>
    </div>
  );
}

export default App;

route code

import HomePage from "../components/pages/homePage";
import ServicesPage from "../components/pages/services";
import FleetPage from "../components/pages/fleet";
import ContactPage from "../components/pages/contact";
import DriversDataPage from "../components/pages/driversData";

const routes = [
  {
    name: "Home",
    path: "/",
    component: <HomePage />,
  },
  {
    name: "Services",
    path: "/Services",
    component: <ServicesPage />,
  },
  {
    name: "Drivers-data",
    path: "/Drivers-data",
    component: <DriversDataPage />,
  },
  {
    name: "Fleet",
    path: "/fleet",
    component: <FleetPage />,
  },
  {
    name: "Contact",
    path: "/Contact",
    component: <ContactPage />,
  },
];

export default routes;