Error Integrating React JS with Keycloak 20.0.5 using @azure/msal-browser module

Question

Hi I was attempting to integrate Keycloak version 20.0.5 with React for authentication using @azure/msal-browser. The integration is successful with versions lower than 20 but with versions above 20 I get the error below:

[org.keycloak.events] (executor-thread-23) type=CODE_TO_TOKEN_ERROR, realmId=d738fd4d-b10a-4a9f-808a-a13a12f43995, clientId=test, userId=null, ipAddress=102.15.0.3, error=invalid_client_credentials, grant_type=authorization_code

Here is my msal configuration:

import * as msal from "@azure/msal-browser";

const BASE_URL = "https://localhost:8443/";
const REALM = "Demo";
const CLIENT_ID = "test"

export const MsalInstance = new msal.PublicClientApplication({
    auth: {
        protocolMode: msal.ProtocolMode.OIDC,
        authorityMetadata: JSON.stringify({
            authorization_endpoint: `${BASE_URL}realms/${REALM}/protocol/openid-connect/auth`,
            token_endpoint: `${BASE_URL}realms/${REALM}/protocol/openid-connect/token`,
            issuer: `${BASE_URL}realms/${REALM}`,
            userinfo_endpoint: `${BASE_URL}realms/${REALM}/protocol/openid-connect/userinfo`,
        }),
        authority: `${BASE_URL}realms/${REALM}`,
        clientId: CLIENT_ID,
        knownAuthorities: [`${BASE_URL}realms/${REALM}`],
    },
});

My guess is the reason for the failed authorization is because userId=null could it be that the user details are not being parsed? What is the correct way to pass them?

From research the best solution I could get was to add open ID to the scope of the client which I attemped but still getting the same error.

User credentials are correctly passed as there is also active Directory integrated to authenticate users.