Why is child component rendering during parent's rendering?

I have this parent component:

<CascadingValue Value="@Email" IsFixed="true"><Header /><div class="container-fluid">        @Body</div></CascadingValue>@code {    [Parameter]    public string Email { get; set; }    protected override async Task OnAfterRenderAsync(bool firstRender)    {        await base.OnAfterRenderAsync(firstRender);        if (!firstRender)            return;        Email = await GetEmailFromLocalStorage();    }}

And the header component (simplified) is:

<Details></Details>

And the details component (grandchild of the parent):

@code {    [CascadingParameter]    public string Email { get; set; }    protected override async Task OnAfterRenderAsync(bool firstRender)    {        await base.OnAfterRenderAsync(firstRender);        if (!firstRender)            return;        var email = Email; //Testing    }}

At runtime, the parent component starts rendering but then the grandchild starts rending and the parameter 'Email' is null.

Why does this happen and is the above not best practice to pass on parameters to child components?