MSAL Outlook Graph API Not returning refresh token with access token

Question

I am creating an auth flow for the user to allow Mail sending through our app for email automation so therefore I need to store the accessToken and the refreshToken in my DB to automatically send these emails at given time intervals.
However even though I can successfully prompt the user to sign in via the Outlook login popup and I get an accessToken, I never get the refreshToken with it.

I tried the other solutions on SO but I can't get a refresh token back.

The response I get:

Azure:

What am I missing here?

I tried setting the offline_access permission as well and I've configured the app on Azure to include that permission as well. After the consent is given and I store these tokens, I want to be able to refresh the token in my C# ASP.NET backend automatically and not prompt the user to reauthenticate. How do I get the refresh token to be returned?

import * as msal from 'https://cdn.jsdelivr.net/npm/@azure/[email protected]/+esm';

const msalConfig = {
    auth: {
        clientId: 'xxxxxxxxxxxxx',
        authority: 'https://login.microsoftonline.com/common',
        redirectUri: 'https://localhost:44398/settings-connections'
    },
    cache: {
        cacheLocation: 'localStorage', 
        storeAuthStateInCookie: true 
    }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

async function initializeMsal() {
    await msalInstance.initialize();
    window.connect_outlook = connect_outlook;
    handleAuthCode();
}

initializeMsal();

function connect_outlook() {
    const loginRequest = {
        scopes: ['openid', 'profile', 'User.Read', 'Mail.Send', 'offline_access'],
        prompt: 'consent'
    };

    msalInstance.loginPopup(loginRequest)
        .then((loginResponse) => {
            acquireTokenPopup();
        }).catch(error => {
            console.error(error);
        });
}

function acquireTokenPopup() {
    const tokenRequest = {
        scopes: ['Mail.Send', 'offline_access']
    };

    msalInstance.acquireTokenPopup(tokenRequest)
        .then((tokenResponse) => {
            sendTokenToServer(tokenResponse);
        }).catch(error => {
            console.error(error);
            if (error instanceof msal.InteractionRequiredAuthError) {
                // Fallback to interactive method to acquire token
                msalInstance.acquireTokenPopup(tokenRequest).then(tokenResponse => {
                    sendTokenToServer(tokenResponse);
                }).catch(interactionError => {
                    console.error(interactionError);
                });
            }
        });
}