Problem with ExternalLoginPicker in FluentUI Template

[meliora-solution]

Recently I tried to use External Authentication Provider with Template from fluentUI with blazor NET 8.

I have a problem registering the external Auth Provider. It just failed to register that external provider.

After long hours, I switch to use blazor template to experiment with External provider. It works.

The problem is in ExternalLoginPicker.

Orignal Code :

 <form class="form-horizontal" action="Account/PerformExternalLogin" method="post">
     <div>
         <AntiforgeryToken />
         <input type="hidden" name="ReturnUrl" value="@ReturnUrl" />
         <p>
             @foreach (var provider in externalLogins)
             {
                 <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent" Title="@($"Log in using your {provider.DisplayName} account")">@provider.DisplayName</FluentButton>
             }
         </p>
     </div>
 </form>

Revised code with the help of AI. It works now.

 <form class="form-horizontal" action="Account/PerformExternalLogin" method="post">
     <div>
         <AntiforgeryToken />
         <input type="hidden" name="ReturnUrl" value="@ReturnUrl" />
         <p>
             @foreach (var provider in externalLogins)
             {
                 <input type="hidden" name="provider" value="@provider.Name" />
                 <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent" Title="@($"Log in using your {provider.DisplayName} account")">@provider.DisplayName</FluentButton>
             }
         </p>
     </div>
 </form>