Child component is not rendering parent component when using inherit keyword

I want to reuse a popup from the Basecomponent in many Childcomponents.The following code ist working.

Basecomponent.razor:

@if (IsPromptVisible){<p>I am Visible</p>}@ChildContent@code {    private bool _isPromptVisible;    [Parameter]    public RenderFragment? ChildContent { get; set; }    [Parameter]    public bool IsPromptVisible    {        get => _isPromptVisible;        set        {            _isPromptVisible = value;            StateHasChanged();        }    }}

Childcomponent.razor:

@page "/"@rendermode InteractiveServer<BaseComponent IsPromptVisible="@_isPromptVisible"><h3>Component A</h3><button @onclick="Show">Show</button><button @onclick="Hide">Hide</button></BaseComponent>@code {    private bool _isPromptVisible;    private void Show() => _isPromptVisible = true;    private void Hide() => _isPromptVisible = false;}

Now I want to use the bool of the Basecomponent because I want to save the extra bool for every child. When I inherit from the Basecomponent the html of the base component does not get rendered anymore any idea what I am doing wrong here ? :

Basecomponent2.razor:

@if (IsPromptVisible){<p>I am Visible</p>}@ChildContent@code {    private bool _isPromptVisible;    [Parameter]    public RenderFragment? ChildContent { get; set; }    public bool IsPromptVisible    {        get => _isPromptVisible;        set        {            _isPromptVisible = value;            StateHasChanged();        }    }}

Childcomponent2.razor:

@page "/2"@rendermode InteractiveServer@inherits BaseComponent<BaseComponent><h3>Component B</h3><button @onclick="Show">Show</button><button @onclick="Hide">Hide</button></BaseComponent>@code {    private void Show()    {        IsPromptVisible = true;        StateHasChanged();    }    private void Hide()    {        IsPromptVisible = false;        StateHasChanged();    }}