So am at loss as to how to fix this issue. I am trying to render side menu control as shown in FluentAvalonia.UI.Controls

This is my category and category with children

public abstract class CategoryBase { }

public class Separator : CategoryBase { }

public class CategoryWithChildren : CategoryBase
{
    public string Name { get; set; }
    
    public string ToolTip { get; set; }

    public Symbol Icon { get; set; }

    public ObservableCollection<CategoryBase> Children { get; set; }
}

public class Category : CategoryBase
{
    public string Name { get; set; }
    public string ToolTip { get; set; }

    public Symbol Icon { get; set; }

    public string FullName { get; set; }

}

and my MenuItemTemplateSelector

  public class MenuItemTemplateSelector : DataTemplateSelector
{
    [Content]
    public IDataTemplate ItemTemplate { get; set; }

    public IDataTemplate SeparatorTemplate { get; set; }
    
    public IDataTemplate ItemTemplateWithChildren { get; set; }

    protected override IDataTemplate SelectTemplateCore(object item)
    {
        return item switch
        {
            Separator => SeparatorTemplate,
            Category => ItemTemplate,
            _ => ItemTemplateWithChildren
        };
    }
}

Then in the view, here is my rendering

 <ui:NavigationView x:Name="DefaultNavigation"
                           PaneDisplayMode="LeftCompact"
                           MenuItemsSource="{Binding Categories}"
                           Content="{Binding CurrentPage}"
                           SelectedItem="{Binding SelectedCategory}">
            <ui:NavigationView.MenuItemTemplateSelector>
                <sel:MenuItemTemplateSelector>
                    <DataTemplate DataType="{x:Type sel:Category}">
                        <ui:NavigationViewItem
                            Content="{Binding Name}"
                            IconSource="{Binding Icon}"
                            ToolTip.Tip="{Binding ToolTip}" />
                    </DataTemplate>

                    <sel:MenuItemTemplateSelector.ItemTemplateWithChildren>
                        <DataTemplate DataType="{x:Type sel:CategoryWithChildren}">
                            <ui:NavigationViewItem
                                Content="{Binding Name}"
                                IconSource="{Binding Icon}"
                                ToolTip.Tip="{Binding ToolTip}"
                                SelectsOnInvoked="False">
                                <ui:NavigationViewItem.MenuItems>
                                    <ui:NavigationView
                                        MenuItemsSource="{Binding Children}">
                                        <ui:NavigationViewItem
                                            Content="{Binding Name}"
                                            IconSource="{Binding Icon}"
                                            ToolTip.Tip="{Binding ToolTip}" />
                                    </ui:NavigationView>
                                </ui:NavigationViewItem.MenuItems>
                            </ui:NavigationViewItem>
                        </DataTemplate>
                    </sel:MenuItemTemplateSelector.ItemTemplateWithChildren>


                    <sel:MenuItemTemplateSelector.SeparatorTemplate>
                        <DataTemplate DataType="{x:Type sel:Separator}">
                            <ui:NavigationViewItemSeparator />
                        </DataTemplate>
                    </sel:MenuItemTemplateSelector.SeparatorTemplate>
                </sel:MenuItemTemplateSelector>
            </ui:NavigationView.MenuItemTemplateSelector>
        </ui:NavigationView>

Now my problem is that when I click on the stocks menu, I get Unable to cast object of type 'FluentAvalonia.UI.Controls.NavigationView' to type CategoryWithChildren. I’m guessing the problem is with this piece of code below but not sure what I need to do as I couldn’t find any documentation on how to fix the issue

<sel:MenuItemTemplateSelector.ItemTemplateWithChildren>
                    <DataTemplate DataType="{x:Type sel:CategoryWithChildren}">
                        <ui:NavigationViewItem
                            Content="{Binding Name}"
                            IconSource="{Binding Icon}"
                            ToolTip.Tip="{Binding ToolTip}"
                            SelectsOnInvoked="False">
                            <ui:NavigationViewItem.MenuItems>
                                <ui:NavigationView
                                    MenuItemsSource="{Binding Children}">
                                    <ui:NavigationViewItem
                                        Content="{Binding Name}"
                                        IconSource="{Binding Icon}"
                                        ToolTip.Tip="{Binding ToolTip}" />
                                </ui:NavigationView>
                            </ui:NavigationViewItem.MenuItems>
                        </ui:NavigationViewItem>
                    </DataTemplate>
                </sel:MenuItemTemplateSelector.ItemTemplateWithChildren>

Any help is welcome