ListView with Grouped Headers in UWP C++/winrt Application

Question

I'm learning WinUI controls, when I started learning ListViews, Creating a Grouped ListView I faced an error. The following is the C++/Winrt code:

//MainPage.idl file  
namespace BlankApp2  
{  
    runtimeclass Product  
    {  
        Product();  
        String productName;  
    }  
  
    runtimeclass ProductGroup  
    {  
        ProductGroup();  
        String ProductsGroupName;  
        Windows.Foundation.Collections.IObservableVector<Product> products{ get; };  
    }  
  
    runtimeclass Groups  
    {  
        Groups();  
        Windows.Foundation.Collections.IObservableVector<ProductGroup> productGroups{ get; };  
    }  
  
    [default_interface]  
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page  
    {  
        MainPage();  
        Groups GroupsViewModel{ get; };  
    }  
}  



//MainPage.xaml  
  
<Page.Resources>  
        <CollectionViewSource x:Name="mainCollectionViewSource"  
                              Source="{x:Bind GroupsViewModel.productGroups}"  
                              IsSourceGrouped="True"/>  
    </Page.Resources>  
    <Grid>  
        <ListView ItemsSource="{Binding Source={ThemeResource mainCollectionViewSource}}">  
            <ListView.GroupStyle>  
                <GroupStyle>  
                    <GroupStyle.HeaderTemplate>  
                        <DataTemplate x:DataType="local:ProductGroup">  
                            <TextBlock Text="{x:Bind ProductsGroupName}"/>  
                        </DataTemplate>  
                    </GroupStyle.HeaderTemplate>  
                </GroupStyle>  
            </ListView.GroupStyle>  
            <ListView.ItemTemplate>  
                <DataTemplate x:DataType="local:Product">  
                    <TextBlock Text="{x:Bind productName}"/>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  
    </Grid>  
</Page>  

then I populated the list with some dumb data

//MainPage.cpp  
  
namespace winrt::BlankApp2::implementation  
{  
    MainPage::MainPage()  
    {  
        for (int i = 0; i < 10; i++)  
        {  
            winrt::BlankApp2::ProductGroup newProductGroup;  
            newProductGroup.ProductsGroupName(L"ProductGroupName " + winrt::to_hstring(i));  
  
            for (int j = 0; j < 10; j++)  
            {  
                winrt::BlankApp2::Product newProduct;  
                newProduct.productName(L"Product " + winrt::to_hstring(j));  
  
                newProductGroup.products().Append(newProduct);  
            }  
            GroupsViewModel().productGroups().Append(newProductGroup);  
  
            DataContext(m_groupsViewModel);  
        }  
    }  
  
    winrt::BlankApp2::Groups MainPage::GroupsViewModel()  
    {  
        return m_groupsViewModel;  
    }  
}  

the outcome is that only the ListView headers do show without the items