MSAL Angular Library is returning access token in response

Question

Aim - We need to transfer PDF file from S3 bucket to user's SharePoint location.

Our frontend is in Angular and backend is in .NET C# WebAPI.

We are using the MSAL library provided by Microsoft to perform the OAuth.

We are trying to implement a Authorization code flow with PKCE.

Problem - We are receiving the access token in the response of the following code even though, we have configured it to return code in response.

MSAL internally calls the token endpoint, not sure why?

enter image description here

Solution we are looking for - We need want to exchange the access token in the frontend but in the backend, however, MSAL is exchanging it automatically. Can someone explain this behavior?

const codeVerifier = this.generateRandomCodeVerifier();
const codeChallenge = this.generateCodeChallenge(codeVerifier);
const request = {
    redirectUri: 'https://localhost:5001/api/authorizecallback',
    scopes: ["openid", 'profile'],
    prompt: 'consent',
    responseType: 'code',
    responseMode: 'query',
    codeChallenge: codeChallenge,
    codeChallengeMethod: 'S256'
};

this.authService.loginPopup(request).subscribe(
    (response) => {
        if (response) {
        }
    },
    (err) => {
    },
    () => {
    }
);

We have already tried to change the configuration, but nothing seems to work.