How Authorization with Blazor web app works?

I created a blazor web app auto render mode project with individual accounts, in the PersistingRevalidatingAuthenticationStateProvider it only picks up one role :

var role = principal.FindFirst(options.ClaimsIdentity.RoleClaimType)?.Value;

But I have a user with two roles, how come both authorizeView are appearing in my application in the following code when I'm only getting one in PersistingRevalidatingAuthenticationStateProvider?

Shouldn't AuthorizeView only appear for one of the roles?

<AuthorizeView Roles=‘@Roles.Admin’><br /><h2>You are Admin!</h2></AuthorizeView><AuthorizeView Roles=‘@Roles.User’><br /><h2>You are User!</h2></AuthorizeView>

Can someone explain me this.