Building a main homepage using react, the content of each sub page isn't showing up on the main page

The content of each subpage isn't showing up on the webpage. It seems to be a routing problem where the linking of the page to the app.js isn't done correctly. I've tried a few variations with changing the name of the subpages and with the routing, still stuck.

Here's the App.js

import Home from './pages/Home.js'import Dashboard from './pages/Dashboard.js'import OnBoarding from './pages/OnBoarding.js'import { BrowserRouter , Routes , Route} from 'react-router-dom'const App = () => {  return (<BrowserRouter><Routes><Route path="/" element={<Home/>}/><Route path="/dashboard" element={<Dashboard/>}/><Route path="/onboarding" element={<OnBoarding/>}/></Routes></BrowserRouter>  )}export default App

index.js

import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode><App /></React.StrictMode>)

Home.js:

import Nav from '../components/Nav'const Home = () => {    const authToken= true    const handleClick = () => {        console.log('clicked')    }    return (<><Nav/><div className="home" ><h1>Swipe Right</h1><button className="primary-button" OnClick={handleClick}>                {authToken ? 'Signout' : 'Create Account'}</button></div></>    )}export default Home

Dashboard.js:

const Dashboard = () => {    return (<div>Dashboard</div>    )}export default Dashboard

Onboarding.js:

const OnBoarding = () => {    return (<div> Onboarding </div>    )}export default OnBoarding

I'm new to react and this is my first project. Thank you for your help in advance.