react router with conditions not rendering with paths - reactjs

Question

I just started learning react router.
I am trying with a fairly basic example.
As I am trying with different routes, these routes are accessible when I try to hit them explicitly but when I am loading the page, its not loading the desired route. Can anyone please help me where I am making mistake.
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import Header from './components/Header';
import ProductCard from './components/ProductCard';
import ProductPage from './components/ProductPage';
import Cart from './components/Cart';
import { useSelector } from 'react-redux';
import LoginForm from './components/LoginForm';
import { useState, useEffect } from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
function App() {
const showCartOption = useSelector(state => state.cart.showCartOption);
const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
console.log("test - " + showCartOption + " " + isAuthenticated);
return (
<div class="m-3 shadow p-2">
<Header></Header>
<ProductPage />
<div class="row" >
<BrowserRouter>
{!isAuthenticated &&
<Route path="/login">
<LoginForm />
</Route>
}
{isAuthenticated && showCartOption &&
<ProductPage />
}
{isAuthenticated &&
<Route path='/products'>
<ProductPage />
</Route>
}
{isAuthenticated && !showCartOption &&
<Route path='/cart'>
<Cart />
</Route>
}
{!isAuthenticated && <LoginForm></LoginForm>}
</BrowserRouter>
</div>
</div >
);
}
export default App;
on loading the above snippet, console shows the value of flags as
showCartOption - true
isAuthenticated - false
I thought that it could be because it may go to every block until the end. I am not sure how this would work since I have added multiple conditions, so I also tried it with one single condition (added modified snippet below). In this case I was expecting that it would load the /login page. but that is also not happening. Its landing on the page where there is no path and hence no component.
2nd attempt :
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import Header from './components/Header';
import ProductCard from './components/ProductCard';
import ProductPage from './components/ProductPage';
import Cart from './components/Cart';
import { useSelector } from 'react-redux';
import LoginForm from './components/LoginForm';
import { useState, useEffect } from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
function App() {
const showCartOption = useSelector(state => state.cart.showCartOption);
const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
console.log("test - " + showCartOption + " " + isAuthenticated);
return (
<div class="m-3 shadow p-2">
<Header></Header>
<ProductPage />
<div class="row" >
<BrowserRouter>
{!isAuthenticated &&
<Route path="/login">
<LoginForm />
</Route>
}
</BrowserRouter>
</div>
</div >
);
}
export default App;