Why won't my express-session persist? - node.js

Question

I'm currently working on a MERN stack application that will utilize a login/sign-up form that is linked to my Mongo database. I have successfully been able to create a user, hash the user's password, and then store this user into the database, as well as log the user in by checking their credentials from the database.
When attempting to employ a solution that's industry standard, I decided to work with Passport and Express-session to implement authentication and sessions for each user when they log in. Once a user is created/logged in, passport correctly stores their information into req.user, and a session is created and logged with req.session. Below is the console log of req.user followed by req.session :
user with id xxx serialized
email: ...
password: ...
isAuthenticated: true
Session {
path: '/',
_expires: null,
originalMaxAge: null,
httpOnly: true },
passport: {user: xxx } }
This all displays right after I log-in, and to my knowledge this means that a session has been created and my user has been serialized properly. However, when I go to a new page on the webapp, I lose my session-- req.user becomes undefined, and req.sessionId changes each time the page does -- which leads me to believe that a new session with an empty user is created each time I switch pages (I am running a fetch method in my NavBar in React that triggers each time the Component mounts). Google Chrome also does not accurately log the cookies even when they are created as evidenced by the console logs.
My question is : why won't my session persist when I switch pages? My goal is to keep track of this session data to pass to my React frontend to render specific content. Is there a better way to go about this? Below is my middleware ordering:
app.use(session({
secret: 'test',
saveUninitialized: false,
resave: true
}));
app.use(passport.initialize());
app.use(passport.session());
Here are the methods I am calling in my router file:
router.get('/',function(req, res){
console.log(req.user);
console.log(req.session);
});
router.post('/login',passport.authenticate('local'), function(req,res)
{
console.log(req.user);
console.log(req.isAuthenticated());
console.log(req.session);
});
passport.serializeUser(function(user, done) {
console.log("user with id " + user._id + " serialized");
done(null, user._id);
});
passport.deserializeUser(function(id, done) {
console.log("deserializing user with id " + id + " ");
User.findById(id, function(err, user) {
done(err, user);
});
});
Here is my api fetch call from my front end:
componentDidMount(){
var current_user = "";
fetch("http://localhost:3001/users/", {
method: "get",
headers: {
'Accept':'application/json',
'Content-Type': 'application/json'
}
})
.then( (response)=> response.json())
.then( (response)=> {
if(response.user!==current_user){
current_user = response.user;
this.setState({
user: current_user
}), ()=> console.log(response);
}
})
}
I am also aware that currently the fetch method will not properly work: the goal is for that skeleton to work properly and have it return the correct id. What is logging improperly is the session and the req.user before I can even get the chance to pass it to my front end. Any and all help would be appreciated.