Using MSAL (Microsoft Authentication Library) with REDUX

I am trying to use the MSAL library within REDUX for auth but having some trouble. When I make a react only app and do the same thing, I get the access token successfully but trying to use it in REDUX, I always get a timeout when trying to fetch the access token.

function Auth() {
    var userAgentApplication = new Msal.UserAgentApplication(*my app id*, null, function (errorDes, token, error, tokenType) {
    // this callback is called after loginRedirect OR acquireTokenRedirect (not used for loginPopup/aquireTokenPopup)
    });

    return new Promise((resolve, reject) => { 
        console.log('inside the promise');
        userAgentApplication.loginPopup(["user.read"]).then((token) => {
            console.log("Successfully got id token");
            console.log("first token: ", token);
            console.log(userAgentApplication.getUser().name);
          userAgentApplication.acquireTokenSilent(["user.read"]).then((token) => {
            resolve(token);
        }, function(error) {
            reject(error);
        });
    }, function (error) {
        reject(error);
    });
});
}

This is the code I have but I always get the following error Token renewal operation failed due to timeout: null When I try to do this in plain HTML or react only app, it works perfectly. Any sort of help would be highly appreciated.