Adding a default grouping field in kendo ui grid causes column headers to disappear

I am creating a kendo grid that is built out by calling an remote data source. I have enabled grouping, which works as expected, but I would like to default grouping and leave the user the option of adding/changing the groupings. I added the group parameter to the data source and this adds the desired group by default, but it also causes all column headers to disappear which prevents the end user from having the ability to add/change the groupings and also makes it a bit harder to read the displayed data. Google has failed me, so I submit myself to the mercy of stack overflow.

<div id="grid"></div>

<script>
    var remoteDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "https://localhost:44387/api/values",
                dataType: "json"
            }
        },
        pageSize: 8
        ,group: { field: "State" }
    });

    $("#grid").kendoGrid({
        toolbar: ["excel", "pdf"],
        groupable: true,
        sortable: true,
        pageable: {
            pageSize: 5,
            buttonCount: 10,
            pageSizes: true
        },
        excel: {
            allPages: true
        },
        pdf: {
            allPages: true,
            landscape: true
        },
        selectable: {
            mode: "multiple, row"
        },
        reorderable: {
            columns: true
        },
        dataSource: remoteDataSource,
        height: 800,
        width: 2000
    });
</script>

Without default grouping:No Default Group

With default grouping: With Default Group