How do I have multiple embedded powerbi reports in a blazor project?

See more:

C#

JSON

Blazor

PowerBI

I have a blazor project that embeds a PowerBI report however i'm struggling to get different pages to show different reports. Currently I can only get two pages to show the same report. I have a .razor page called "PowerBIReport.razor" which has this code (I also have a page called "ReportTest.razor" which I want to show a different PowerBI report:

if (firstRender)
            {
                var embedModuleTask = JS.InvokeAsync<IJSObjectReference>("import", "./scripts/powerbi-embed.js");
                var reportViewModelTask = Http.GetFromJsonAsync<EmbeddedReportViewModel>("api/PowerBI");
                embedModule = await embedModuleTask;
                reportViewModel = await reportViewModelTask;
                StateHasChanged();
            }
            else if (embedModule is not null && reportViewModel is not null)
            {
                errorMessage = string.Empty;
                await embedModule.InvokeVoidAsync("embedReport",
                    PowerBIElement,
                    reportViewModel.Id,
                    reportViewModel.EmbedUrl,
                    reportViewModel.Token);
            }

This sends it to "PowerBIController.cs":

var authResult = await app.AcquireTokenForClient(scopes).ExecuteAsync();

                var tokenCredentials = new TokenCredentials(authResult.AccessToken, "Bearer");
                var urlPowerBiServiceAppRoot = "https://api.powerbi.com/";
                var pbiClient = new PowerBIClient(new Uri(urlPowerBiServiceAppRoot), tokenCredentials);

                var workspaceId = new Guid(_configuration["PowerBI:WorkspaceId"]);
                var reportId = new Guid(_configuration["PowerBI:ReportId"]);
                var report = pbiClient.Reports.GetReportInGroup(workspaceId, reportId);

                var tokenRequest = new GenerateTokenRequest(TokenAccessLevel.View, report.DatasetId);
                var embedTokenResponse = await pbiClient.Reports.GenerateTokenAsync(workspaceId, reportId, tokenRequest);

                var reportViewModel = new EmbeddedReportViewModel(
                    report.Id.ToString(),
                    report.Name,
                    report.EmbedUrl,
                    embedTokenResponse.Token);

                return Ok(reportViewModel);

These are the .json settings:

{
  "AzureAppInfo": {
    "AuthenticationMode": "ServicePrincipal",
    "AuthorityUri": "https://login.microsoftonline.com/TenantId",
    "ClientId": "d7177345-fa2e-4ef5-9d42-619441aa18f0",
    "TenantId": "32e5e8eb-b522-4d94-b35f-75e6755a9b83",
    "Scope": "https://analysis.windows.net/powerbi/api/.default",
    "ClientSecret": "V3d8Q~s3TyFB3aKHxkEsf36UsU2ngP8O~K.UEbcP"
  },
  "PowerBI": {
    "WorkspaceId": "08ec7b7f-8b1a-4952-8f9c-c8d65e8d7ab3",
    "ReportId": "e3ceb447-0ae6-4398-a14d-abf16fe11031"
  },
  "ReportTest": {
    "WorkspaceId": "08ec7b7f-8b1a-4952-8f9c-c8d65e8d7ab3",
    "ReportId": "ac1d04be-9d9c-47b7-bcda-fb225ac00ce1"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

My problem is that in the controller I can either call "PowerBI:WorkspaceID" or "ReportTest:WorkspaceID". So both pages I have end up just displaying the same report. I need some advice on how I can switch between the different ID's in appsettings.json

What I have tried:

All I have tried is switching between "PowerBI:WorkspaceId PowerBI:ReportId " and "ReportTest:WorkspaceID ReportTest:ReportId".