React Client Side is Unable to authenticate using passport - node.js

Question

So I'm building a MERN app that is supposed to be authenticating using passport. I've created a login page, a register page and a upload route on the frontend, along with a backend server in node js, mongo db and react. I'm using the passport, passport-local, and passport-local-mongoose npm packages to help with session based authentication.
So when I login using my login page, my server does return the success message and I am redirected correctly. When I try to upload, it turns out that the request can't get past my isLoggedIn middleware. But when I try the same with hoppscotch(which runs using the hoppscotch browser extenxsion), it logs in, and both, the upload requests from my upload page and the upload requests from hoppscotch succeed easily and everything works correctly.
Ohkay so here's my code for my login page:
import axios from "axios";
import React, { useState } from "react";
import "./login.css";
const Login = (props) => {
const [username, setUsername] = useState();
const [password, setPassword] = useState();
const onSubmit = (e) => {
e.preventDefault();
const obj = { username: username, password: password };
axios
.post("http://localhost:4000/api/login", obj)
.then((res) => {
console.log("login response: ", res);
if(res.status === 200) {
alert("Logged in!!!");
// window.location.href = "/";
}
})
.catch((e) => {
alert("error");
console.log(e);
});
};
return (
<div className="cont">
<form className="input" onSubmit={onSubmit}>
<label className="label" htmlFor="username">Username:</label>
<input
className="input"
type="text"
id="username"
onChange={(e) => setUsername(e.target.value)}
/>
<label className="label" htmlFor="password">Password:</label>
<input
className="input"
type="password"
id="password"
onChange={(e) => setPassword(e.target.value)}
/>
<button className="button" type="submit" value="submit">
Submit
</button>
</form>
</div>
);
};
export default Login;
And this would be my upload page:
import React, { useState } from "react";
import axios from "axios";
const Home = () => {
const [file, setFile] = useState();
const onSubmit = (e) => {
e.preventDefault();
const data = new FormData();
data.append("file", file);
axios
.post("http://localhost:4000/api/upload/resume", data, {
withCredentials: true,
headers: { "Content-Type": "multipart/form-data" },
})
.then((file) => {
console.log("worked ", file);
})
.catch((e) => {
console.log(e);
});
};
// post to http://localhost:4000/home
return (
<form onSubmit={onSubmit}>
<p>Submit your resume pdf here ( Resume pdf should be 12 Mb or less )</p>
<input
type="file"
id="pdf-file"
onChange={(e) => setFile(e.target.files[0])}
/>
<button type="submit">Upload</button>
</form>
);
};
export default Home;
this is my login route:
router.post("/login", (req, res, next) => {
passport.authenticate("local", (err, user, info) => {
if (err) throw err;
if (!user) res.send("No User Exists");
else {
req.logIn(user, (err) => {
if (err) throw err;
res.send("Successfully Authenticated");
console.log(req.user);
});
}
})(req, res, next);
});
And finally this is my isLoggedIn Middleware:
const isLoggedIn = (req, res, next) => {
console.log(req);
if (req.isAuthenticated()) {
console.log("authenticated");
return next();
}
console.log("not authenticated");
throw new Error("User not authenticated");
};
module.exports = isLoggedIn;