"Blazor Server Component's OnAfterRenderAsync not being called when rendered from _Layout.cshtml

I have a Blazor Server component that's rendered from my _Layout.cshtml page. While the component renders and OnInitializedAsync is called, OnAfterRenderAsync is never triggered. This is peculiar because I have another similar component where OnAfterRenderAsync works correctly. The main functional issue is that while this consent modal displays, the agree button I have that is supposed to dismiss the modal does not function and does not hit the HandleAgreeClick() method in the razor's code section when clicked despite being referenced in the input button's @onclick attribute.

Here's my working component (simplified):

// SessionTimeout.razor@inherits SessionTimeoutBase@using Microsoft.AspNetCore.Mvc.TagHelpers;<div id="lblSessionTimeout" class="timer" style="z-index: 999;">    Session Time Remaining:<span role="timer" id="spanSessionTimeout"></span></div>// ... rest of component@code {    protected override async Task OnAfterRenderAsync(bool firstRender)    {        if (firstRender)        {            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Components/SessionTimeout.razor.js");            await module.InvokeVoidAsync("timer", OriginalTimeout, SessionWarning, TimeoutCount);        }    }}

And here's my problematic component:

// ConsentModal.razor@inherits ConsentModalBase@namespace TCore.Components@inject ILogger<ConsentModal> logger<div id="consentModal" class="tmodal" style="display: block"><div class="tmodal-content"><h2>Consent Agreement</h2><p>[Your consent agreement text here]</p><div><input type="button"                    value="Agree"                    id="btnAgreeConsent"                    class="tmodal-button"                    title="Agree to Terms"                   @onclick="HandleAgreeClick"></div></div></div>@code {    protected override async Task OnAfterRenderAsync(bool firstRender)    {        logger.LogInformation("ConsentModal OnAfterRenderAsync attempting to run"); // Never gets hit        if (firstRender)        {            try             {                module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Components/ConsentModal.razor.js");                await module.InvokeVoidAsync("initializeConsent");            }            catch (Exception ex)            {                logger.LogError(ex, "Error in OnAfterRenderAsync");            }        }    }}

Both components are rendered in _Layout.cshtml using similar syntax:

// Working SessionTimeout component<div class="siteTitle" id="divSessionTimeOut"><component type="typeof(SessionTimeout)" render-mode="ServerPrerendered" param-UserId="@UserId" /></div>// Problematic ConsentModal component@if (!isConsentAgreed && !isConsentPage && !isSessionLoggedOutPage && !isSessionExpiredPage && (hasEDIPI == null)){<div><component type="typeof(TCore.Components.ConsentModal)" render-mode="ServerPrerendered" /></div>}

I've verified through debug output that the condition for rendering the ConsentModal is true and the component is being rendered (visible in page source). OnInitializedAsync is being called, but OnAfterRenderAsync is never triggered.What could be preventing OnAfterRenderAsync from being called in the ConsentModal component when it works fine in SessionTimeout?