Microsoft teams app in blazor

Question

Hi I'm developing a microsoft teams app using blazor server (this is what the teams app uses), I'm trying to implement a custom reconnection modal as recommended in the official Blazor documentation, by placing it within App.razor. I've tried to overwrite the default content that blazor provides, but it doesn't seem to work. the teams blazor app template is slighty different from the normal blazor app. So attached is the content of my App.Razor, I expect the text in my div to be shown, but instead it is still showing the default text.

I followed this step to overwrite the div

ASP.NET Core Blazor SignalR guidance | Microsoft Learn

Any help will be appreciated

 

<FluentDesignSystemProvider AccentBaseColor="#6264A7">
    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</FluentDesignSystemProvider>

<div id="components-reconnect-modal">
    There was a problem with the connection!
    (Current reconnect attempt:
    <span id="components-reconnect-current-attempt"></span> /
    <span id="components-reconnect-max-retries"></span>)
</div>