I want to render private routes for logged in users. For some reason react-router-dom (v6) renders private routes even if PrivateRoute returns null. Also, I couldn't see any console.logs from inside PrivateRoute. Any ideas?

EDIT

It renders Dashboard when you go to localhost/dashboard and Settings when you go to localhost/settings, even though both components are passed to PrivateRoute, which returns null.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';

import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    ,  document.getElementById('root'));

App.js

import {Route, Routes} from 'react-router-dom';

import {Home} from './components/Home';
import {Pricing} from './components/Pricing';
import {Dashboard} from './components/Dashboard';
import {Settings} from './components/Settings';
import {Login} from './components/Login';
import {Header} from './components/Header';
import {PrivateRoute} from './components/PrivateRoute';

const App = () => {
  

  return (
    <div>
      <Header />

      <Routes>
        <Route path='/' element={<Home/>} />
        <Route path='/pricing' element={<Pricing />} />
        <PrivateRoute path='/dashboard' element={<Dashboard />} />
        <PrivateRoute path='/settings' element={<Settings />} />
        <Route path='/login' element={<Login />} />
      </Routes>
    </div>
  );
};

export default App;

PrivateRoute.js

export const PrivateRoute = ({path, element}) => {
    console.log('PrivateRoute');    **// couldn't see this in the console**

    return null;
};