devextreme pivot grid date groups handler.apply error

Question

Midway through this: https://js.devexpress.com/Documentation/Guide/UI_Components/PivotGrid/Fields_and_Areas/#Areas

It talks about groups. This is my implementation for grouping daily data into months and year columns:

// Cast Created At to be date (for later formatting)
this.pivotGridSource.field("Created At", {
        dataType: "date",
        area: "column"
      });

// Get all grid fields
let dateRollupFields = this.pivotGridSource.fields()

// Get index of Created At field
const createdAtIndex = dateRollupFields.map(o => o.caption).indexOf("Created At");

// Create groups for years and months of Created At values      
      let dateGroups: any[] = [{
        area: 'column',
        dataType: 'date',
        caption: 'Created At Month',
        groupName: 'created_at_date',
        groupInterval: 'month',
        sortOrder: 'desc'
      }, {
        area: 'column',
        dataType: 'date',
        caption: 'Created At Year',
        groupName: 'created_at_date',
        groupInterval: 'year',
        sortOrder: 'desc'
      }]
      dateRollupFields.splice(createdAtIndex + 1, 0, ...dateGroups);
      
// Apply fields
      this.pivotGridSource.fields(dateRollupFields);

This gives me two columns but when I go to view their values, I get the error from this screenshot.