ListView items are not displaying after trying to add Group Headers to listview

I had a listview with the itemsource binded to a ObservableCollection property in the view model.
I then wanted to group this items by their Date value but now the listview is not being visibly populated.
Below is my listview in the Xaml page.

    <ListView
                              ItemsSource="{Binding UpcomingGamesGrouped}"
                              IsGroupingEnabled="True"
                              GroupDisplayBinding="{Binding Key}"
                              GroupShortNameBinding="{Binding Key}"
                              ItemSelected="ListView_ItemSelected"
                              SelectedItem="{Binding SelectedFixture, Mode=TwoWay}"
                              HasUnevenRows="True" IsVisible="True" Grid.Column="1">
                        <ListView.GroupHeaderTemplate>
                            <DataTemplate>
                                <ViewCell Height="25">
                                    <StackLayout VerticalOptions="FillAndExpand"
                                                   Padding="5"
                                                   BackgroundColor="#3498DB">
                                        <Label Text="{Binding Key}" TextColor="White" VerticalOptions="Center"/>
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <ViewCell.View>
                                        <Grid >
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition/>
                                                <ColumnDefinition Width="50"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <Label Text="{Binding HomeTeam}" TextColor="{DynamicResource mainTextColor}"
                                                    Grid.Column="0" Grid.Row="0" HorizontalOptions="CenterAndExpand"
                                                    FontSize="{DynamicResource teamFontSize}"/>
                                            <Label Text="{Binding Time}" FontSize="{DynamicResource regularFontSize}" HorizontalTextAlignment="Center" WidthRequest="40"
                                                   BackgroundColor="{DynamicResource subTextColor}"
                                                        HorizontalOptions="Center" Grid.Column="1" Grid.Row="0"/>
                                            <Label Text="{Binding AwayTeam}" TextColor="{DynamicResource mainTextColor}"
                                                    Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand"
                                                    FontSize="{DynamicResource teamFontSize}"/>
                                            <Label Text="{Binding Location}" FontSize="{DynamicResource subtitleFontSize}"
                                                    HorizontalOptions="CenterAndExpand" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3"/>
                                        </Grid>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>

The UpComingGame model looks like this:

public class UpComingGame
    {
        public string Location { get; private set; }
        public string Time { get; private set; }
        public string HomeTeam { get; private set; }
        public string AwayTeam { get; private set; }
        public string Date { get; private set; }

        public string DateSort
        {
            get
            {
                if (string.IsNullOrWhiteSpace(Date) || Date.Length == 0)
                    return "?";

                return Date;
            }
        }

        public UpComingGame(string awayTeam, string homeTeam, string time, string location, string date)
        {
            HomeTeam = homeTeam;
            AwayTeam = awayTeam;
            Time = time;
            Location = location;
            Date = date;
        }
    }

I created a separate class called Grouping which looks like the following

public class Grouping<K, T> : ObservableCollection<T>
    {
        public K Key { get; private set; }

        public Grouping(K key, IEnumerable<T> items)
        {
            Key = key;
            foreach (var item in items)
                this.Items.Add(item);
        }
    }

And finally in the view model...

private void LoadData()
        {
            if (_isDataLoaded)
                return;

            _isDataLoaded = true;

            var upcomingGames = _htmlParser.GetUpcomingGames(url);

            var sorted = from fixture in upcomingGames
                         orderby fixture.Date
                         group fixture by fixture.DateSort into fixtureGroup
                         select new Grouping<string, UpComingGame>(fixtureGroup.Key, fixtureGroup);

            UpcomingGamesGrouped = new ObservableCollection<Grouping<string, UpComingGame>>(sorted);

        }

The bindings are all working fine and it seems like the UpcomingGamesGrouped collection is being assigned to correctly.
But I can't figure out the reason why the items are not being displayed in the listview.