Keycloak duplicate session issue

Question

I have two Applications. On running on

example.com and another running on example.com/insurance/

I am using Keycloak IDP. The application running on /microinsurance/ is an Angular app 17. In keycloak we have this configuration for session limit.

If user logs into the system and and visits /insurance on another new tab then I am getting a duplicate session error from IDP although I am using the same browser and session.

Here's how I configured Keycloak on angular APP.

export function initializer(keycloak: KeycloakService): () => Promise<any> {
  return (): Promise<any> => {
    return new Promise(async (resolve, reject) => {
      try {
        await keycloak.init({
          config: {
            url: KEYCLOAK_ISSUER_URL,
            realm: KEYCLOAK_REALM,
            clientId: KEYCLOAK_CLIENT_ID,
          },
          initOptions: {
            checkLoginIframe: true,
            onLoad: 'login-required',
          },
          bearerExcludedUrls: [BEARER_EXCLUDE_URL]
        });
        resolve('Success');
      } catch (error) {
        reject(error);
      }
    });
  };
}

Is there anything I am missing to do on the front end? How can I fix the duplicate session problem?