React router not rendering default route

Question

I am trying to add a default page where the user first goes to when opening the site, but it is not rendering the default route. How can I fix this? react router v6 Note: works fine without router so shouldnt be a component issue

import React, {useState} from 'react';
import './App.css';
import {BrowserRouter as Router, Routes, Route, Switch} from 'react-router-dom';
import AddNote from './components/noteDisplay/addNote/newNote.js'
import NoteDisplay from './components/noteDisplay/noteDisplay.js'
import secondPage from './components/secondPage/secondContainer.js'
const App = () => {

  return (
      
        <div className="App">
          <h1 className="app-title">My notes</h1>
          <Router>
            <div>
              <Routes>

                <Route path='/second' component={secondPage}/>
                <Route path='*' component={NoteDisplay}/>

              </Routes>
            </div>

          </Router>

        </div> 


  );
}


export default App;

Answer 1

The page user see first is the home page and specified with "/". To make it default you can use index prop of Route component like in the following

<Route path="/" element={<App />}>
    <Route index element={<Home />} />
    <Route path='/second' component={secondPage}/>
    <Route path='*' component={NoteDisplay}/>
</Route>