Layout Cascading Parameter is null inside pages - Blazor Server

I am trying to pass the layout as a cascaded parameter to the page that uses the layout. The issue I am facing is that the layout cascaded parameter in the page is always null.

Here is the code I am using for MainLayout.razor:

@inherits LayoutComponentBase<CascadingValue Value="this">    @Body    Your Text is: @this.SomeText</CascadingValue>@code {    public string SomeText { get; set; }}

And this is the code I am using for Home.razor:

@page "/"@layout MainLayout@rendermode InteractiveServer@using TestLayout.Components.Layout<button @onclick="this.ClickMe">click me</button>@code {    [CascadingParameter]    public MainLayout layout { get; set; }    public void ClickMe(EventArgs e)    {            this.layout.SomeText = "Some Text";    }}

The following line inside Home.razor is always giving me null reference exception on layout member:this.layout.SomeText = "Some Text";

I checked some posts that claim they faced similar issues, but they didn't work with me.In addition, I've tried passing other variables as cascaded parameters instead of passing the whole layout but also received the same result.