This is the code:

App

import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import ClassroomDashboard from "./ClassroomDashboard";
import Students from "./Students";
import NotFound from "./NotFound";
import Base from "./Base";
import "./styles.css";

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Base />}>
          <Route path="dashboard" element={<ClassroomDashboard />} />
          <Route path="students" element={<Students />} />
          <Route index element={<NotFound />} />
        </Route>
      </Routes>
    </Router>
  );
}

Base

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

function Base() {
  return <Outlet />;
}

export default Base;

NotFound

function NotFound() {
  return "NotFound";
}

export default NotFound;

https://codesandbox.io/s/summer-sound-giti8c?file=/src/App.js

I want that when someone goes to the base url say https://giti8c.csb.app/ then NotFound component should be rendered.

Currently, only Base component renders on going to the base url.