React-router is not displaying component in the browser

Inside App.js:

import React, { useState } from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Dashboard from './components/Dashboard/Dashboard';
import Preferences from './components/Preferences/Preferences';
import Login from './components/Login/Login';

function App() {
  const [token, setToken] = useState();

if(!token) {
return <Login setToken={setToken} />
}

return (
<div className="wrapper">
  <h1>Application</h1>
  <BrowserRouter>
    <Routes>
      /*<Route path="/dashboard">*/
      <Route path="/dashboard" element={<Dashboard/>} /></Route>
      /*<Route path="/preferences">*/
      <Route path="/preferences" element={<Preferences/>} /></Route>
    </Routes>
  </BrowserRouter>
</div>
);
}

export default App;`

Inside Dashboard.js (../src/components/Dashboard/Dashboard.js):

import React from 'react';

export default function Dashboard() {
  return(
  <h2>Dashboard</h2>
  );
 }

Url: http://localhost:3000/dashboard

I want to see the Dashboard content along with the App page content (Application and Dashboard headers) when I load the browser. But when I load the browser, it only displays the App page content and getting the same error:

   "Matched leaf route at location "/dashboard" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page."