Global toasts service Bootstrap for Blazor server application

Question

I am working on a project with Blazor Server (.NET 8) & Bootstrap (2.0.0) and I would like to use the toast component of Bootstrap. I wanted to use The Global toast service to display my toasts when I for example log in.

I followed the Blazor Bootstrap docs and demo's but this does not work.

MainLayout.razor:

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        @* <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div> *@
        <article class="content px-4">
            @Body
        </article>
    </main>
    <Toasts class="p-3" Placement="ToastsPlacement.TopRight" />
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss"></a>
</div>

Login.razor:

(...)
@code {
    [Inject] protected ToastService ToastService { get; set; }

    private async Task LogIn()
    {
        (Code to login in database)
        if (getAuthenticationFromDatabase != null && getAuthenticationFromDatabase.Succeeded)
        {
            ToastService.Notify(new(ToastType.Success, "Welcome"));
            ...
            Navigation.NavigateTo("/"); //redirect to go back to homepage
        }
    }
}

Note: When I move the Toasts tag of Bootstrap to the login.razor, then the toast will show up.

Can anybody help and explain why it does not show up when the toast tag is in MainLayout.razor?

Thanks!