Unable to use ngrx effect with MSAL protected resources and getting error, acquireTokenSilent failing

Question

In my angular 17 app, I'm using ngrx with Msal 3.0 with Azure B2C authentication. There is an API end point which requires authentication and present in the protected resources of msal config like below

protectedResources: [
....
{
  endpoint: 'https://jsonplaceholder.typicode.com/posts',
  scopes: ['opendid']
}
]

The above end point is used in ngrx effect to load posts.

Below is the MsalInterceptorConfiguration added as a provider in application config.

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {

const protectedResources = (environment.protectedResources);
const protectedResourceMap = new Map<string, Array<string> | null>();

protectedResources.map(protectedResource => protectedResourceMap.set(protectedResource.endpoint, protectedResource.scopes));

return {
interactionType: InteractionType.Redirect,
protectedResourceMap,
authRequest: {
  forceRefresh: false
  }
 };
}

My route for the relevant component and a custom guard is as below

export const routes: Routes = [ 
{
  path: 'post',
  component: PostShellComponent,
  canActivate: [ApiAvailabilityGuard, MsalGuard],
}
];

export const ApiAvailabilityGuard: CanActivateFn = () => {
 console.log('ApiAvailabilityGuard returning, true');
 return of(true);
};

When trying to load post component, I'm expecting a redirect for login because of MSAL guard but instead I get this error

@azure/msal-angular@3.0.21 : Error - Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve.

Effect code looks like below

@Injectable()
export class PostEffects {
constructor(
 private actions$: Actions,
 private postService: PostService,
 private authService: MsalService
) { }

loadPosts$ = createEffect(() =>
this.actions$.pipe(      
  ofType(PostAction.loadPost),            
  mergeMap(() => {
    return this.postService.getPosts().pipe(
      map((data) => PostAction.loadPostSuccess({ posts: data })),
      catchError((error: string) => {
        console.log('error', error);
        return of(PostAction.loadPostFailure({ error }))
      }
      )
    );
  })
  )
 );

}

Here is the link of the github repo of this test project