Reactjs – Receiving "No routes matched location" for all Route elements

Although I think I have defined the Route elements properly, I cannot access elements from my browser. It always gives "No routes matched location.." warning. The only Route that works is <Route path='*' element={<Home />} />. I have spent hours but I still do not understand why it is not working.

Below is my App.tsx:

const App: React.FC = () => {
    return (
        <Layout>
            <Suspense fallback={<LoadingSpinner />}>
                <Routes >       
                    <Route path='/home' element={<Home />} />    
                    <Route path='/login' element={<Login />} />
                    <Route path='/register' element={<Register />} />    
                    <Route path='/terms-of-service' element={<TermsOfService />} />
                    <Route path='/privacy-policy' element={<PrivacyPolicy />} />    
                    <Route path='*' element={<Home />} />
                </Routes >
            </Suspense>
        </Layout>
    );
}
export default App;

Below is index.js

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
    <StrictMode>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <BrowserRouter >
                    <Routes>
                        <Route path="/" element={<App />} />
                    </Routes>
                </BrowserRouter >
            </PersistGate>
        </Provider>
    </StrictMode>
);

reportWebVitals();