How can I split role claims blazor web assembly?

Question

I'm on client side project of blazor web assembly. This is my Program:

using Blazored.LocalStorage;
using Epicerie_Client;
using Epicerie_Client.Services;
using Epicerie_Client.Services.Interfaces;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddApiAuthorization()
    .AddAccountClaimsPrincipalFactory<CustomUserFactory>();

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.Configuration.GetValue<string>("BaseAPIUrl")) });

builder.Services.AddScoped<IDepartementService, DepartementService>();
builder.Services.AddScoped<IItemService, ItemService>();
builder.Services.AddScoped<IUniteMesureService, UniteMesureService>();
builder.Services.AddScoped<IGabaritService, GabaritService>();
builder.Services.AddScoped<IEpicerieService, EpicerieService>();
builder.Services.AddScoped<IEpicerieDetailsService, EpicerieDetailsService>();
builder.Services.AddScoped<IGabaritDetailsService, GabaritDetailsService>();

builder.Services.AddBlazoredLocalStorage();
builder.Services.AddAuthorizationCore();
builder.Services.AddScoped<AuthenticationStateProvider, AuthStateProvider>();
builder.Services.AddScoped<IAuthenticationService, AuthenticationService>();

await builder.Build().RunAsync();

This is my claim splitter:

public class CustomUserFactory : AccountClaimsPrincipalFactory<RemoteUserAccount>
    {
    public CustomUserFactory(IAccessTokenProviderAccessor accessor)
        : base(accessor)
    {
    }

    public async override ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var user = await base.CreateUserAsync(account, options);
        var claimsIdentity = (ClaimsIdentity)user.Identity;

        if (account != null)
        {
            MapArrayClaimsToMultipleSeparateClaims(account, claimsIdentity);
        }

        return user;
    }

    private void MapArrayClaimsToMultipleSeparateClaims(RemoteUserAccount account, ClaimsIdentity claimsIdentity)
    {
        foreach (var prop in account.AdditionalProperties)
        {
            var key = prop.Key;
            var value = prop.Value;
            if (value != null &&
                (value is JsonElement element && element.ValueKind == JsonValueKind.Array))
            {
                claimsIdentity.RemoveClaim(claimsIdentity.FindFirst(prop.Key));
                var claims = element.EnumerateArray()
                    .Select(x => new Claim(prop.Key, x.ToString()));
                claimsIdentity.AddClaims(claims);
            }
        }
    }
}

This is the roles in my token: "http://schemas.microsoft.com/ws/2008/06/identity/claims/role": [ "SuperUtilisateur", "Administrateur", "Utilisateur" ]

With that, the roles claim is not splitted so when a user has multiple roles, this is not working as expected.

Do you know what i'm doing wrong?