Blazor, Getting error on invoking Fluent Dialog when invoked from a Scoped Service

I am trying to invoke Dialog in a service "dialogService.ShowErrorAsync" but I am getting the error

FluentDialogProvider needs to be added to the main layout of your application/site. (Parameter 'OnShowAsync') in service.

I am using web assembly web app in which we have 2 projects and 2 main layout files. This is how I am defining my code:

This is my main project main layout file code:

@inherits LayoutComponentBase<FluentLayout>    @Body<FluentDialogProvider @rendermode="RenderMode.InteractiveServer" /></FluentLayout><div id="blazor-error-ui" data-nosnippet>    An unhandled error has occurred.<a href="." class="reload">Reload</a><span class="dismiss">🗙</span></div>

This is my client project main layout file code:

@inherits LayoutComponentBase<FluentLayout><Header /><FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%"><NavMenu /><FluentBodyContent Class="body-content"><div class="content">                @Body<FluentDialogProvider @rendermode="RenderMode.InteractiveWebAssembly" /></div></FluentBodyContent></FluentStack><FluentFooter><FluentSpacer /><a href="www.octutech.com" target="_blank">Powered by OctuTech.com</a><FluentSpacer /></FluentFooter></FluentLayout>@code {}

I am injecting a scoped service and just calling this in a function:

await dialogService.ShowErrorAsync("You are attempting to access a resource for which you do not have the necessary permissions. You will be logged out for security purposes.", "Unauthorized Access");

Note that, this call is happening after the component is fully initialized and rendered, that is on click of a button.

Any suggestions or explanation why it is not working?

Thank you