React-Redux-session , authentication issue - reactjs

Question

I am new undergraduate interning for a startup(Appopener.com), I am trying to build a Login and Sign up page for their new website on reactjs. For this purpose I searched the internet for appropriate references, After spending a lot of time understanding the working of react-router-dom v5 , I was shocked to know that it had upgraded to v6 in which there were a lot of change made, for example - useHistory hook ----> became -----> useNavigate and so on...Now the part where I am stuck is the react-redux sessionService, I have used MongoDB and a simple backend API point which lets me login and signup, the users. Now the problem is when I try to set up a protected route, I am not able to generate a Authentication token from Reac-redux-session, I am trying to use the thunk library. All of the material on the internet seems to be outdated as they provide solution using react-router v5. I would obliged if anyone could help me with the code...
App.js File
// Pages
import Home from './pages/Home';
import Login from "./pages/Login";
import Signup from "./pages/Signup";
import Dashboard from "./pages/Dashboard";
// styled components
import {StyledContainer} from './components/styles';
import Navbar from './components/Navbar';
import {BrowserRouter as Router, Routes , Route } from 'react-router-dom';
import Authroute from './components/Authroute';
function App() {
// Now using react router we need to setup routes for each component (genius extra ordinary mind fucking blown)
return (
<>
<Router>
<Navbar title="Spawnser" aboutText="Dashboard" />
<StyledContainer>
<Routes> {/*the switch will always check for the current link and choose which component to display */}
<Route element={<Authroute />}>
<Route path="/dashboard" element={<Dashboard />} />
</Route>
<Route path="/Signup" element={<Signup />} />
<Route path="/Login" element={<Login />} />
<Route path="/" element={ <Home />}></Route>
</Routes>
</StyledContainer>
</Router>
</>
);
}
export default App;
store.js file
// I know that createStore is depracted if thats the problem let me know....
import { legacy_createStore as createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';
import { sessionService } from 'redux-react-session';
const initialState = {};
const middlewares =[thunk];
const store = createStore(rootReducer, initialState, compose(applyMiddleware(...middlewares)));
sessionService.initSessionService(store);
export default store;
RootReducer.js
// The concept of the reducers is to interact with our store and change up values whenever needed.
import { combineReducers } from "redux";
//session
import { sessionReducer } from "redux-react-session";
const rootReducer = combineReducers({
session: sessionReducer
});
export default rootReducer;
Authroute.js
// With the Authroute I want to prevent user access to the Dashboard iff the user has NOT LOGGED IN...
import {Outlet, Navigate} from 'react-router-dom';
import {connect} from "react-redux";
//authenticated variable has been provided to us by redux react session , by this we know that user has been authenticated or not.
const AuthRoute = () => {
let auth = authenticated //---> This authenticated variable is the problem.
return (
auth ? <Outlet/> : <Navigate to ="/login"/>
)
// See the code below is the way you do it in react-router-v5, I tried to update it to react-router-v6 above but it give error when I try to use it in App.js (main file)
// import {Route, Redirect} from 'react-router-dom';
// import {connect} from 'react-redux';
// <Route {...rest}
// render={
// ({location})=> authenticated ? (children) : (
// <Redirect
// to={{
// pathname: "/login",
// state: {from: location}
// }}
// />
// )
// }
// />
const mapStatetoProps = ({session}) => {
authenticated: session.authenticated
}
export default connect(mapStatetoProps)(AuthRoute);
}
Now just like redux actions to be able to access authenticated from redux we need to pass it the connect function but for state variable such as authenticated we need to create mapstatetoprops function which retains an object and pass it it connect, hence we destructure the session or take the session from the redux state and fetch the authenticated value from it. I think the probem might lie here but THERE IS ABSOLUTELY NO CONTENT OVER HOW TO USE IT WITH THE UPDATE ANYWHERE...PLEASE HELP....
BasicRoute.js
// With the BasicRoute I want to ensure that once the user is logged in visiting the Signup or the Login page will redirect you to the Dashboard
// With the Authroute I want to prevent user access to the Dashboard iff the user has NOT LOGGED IN...
import {Outlet, Navigate} from 'react-router-dom';
import {connect} from "react-redux";
//authenticated has been provided to us by redux react session , by this we know that user has been authenticated or not.
const Basicroute = () => {
let auth = authenticated
return (
auth ? <Outlet/> : <Navigate to ="/login"/>
)
// See the code below is the way you do it in react-router-v5, I tried to update it to react-router-v6 above but it give error when i try to use it
// in App.js (main file)
// import {Route, Redirect} from 'react-router-dom';
// import {connect} from 'react-redux';
// <Route {...rest}
// render={
// ({location})=> !authenticated ? (children) : (
// <Redirect
// to={{
// pathname: "/dashboard",
// state: {from: location}
// }}
// />
// )
// }
// />
}
const mapStatetoProps = ({session}) => {
authenticated: session.authenticated
}
export default connect(mapStatetoProps)(Basicroute);
}
If you need code from any other FILE ALSO PLEASE LET ME KNOW....Thanks a ton