How do I use the groups property in the custom group headers control?

[cardinalpipkin]

I'm trying to use the customer headers but they are not appearing and it's possibly down to not knowing what to put into the
groups={this.groups} property. The fluent ui code says use the CreateGroups() function but this isn't provided and I think it's just an example function anyway.

       <DetailsList
....
          groups={this._groups}
....

I would really appreciate instructions on how to use it. Here is my JSX so far:

 <DetailsList className={styles.DetailsList}
            items={allItems.slice((ListPage - 1) * 50, ((ListPage * 50)))}
            // groups={}?????????????
            groupProps={{
                onRenderHeader: _onRenderGroupHeader
            }}
            onRenderDetailsHeader={_onRenderDetailsHeader}
            columns={_detailsListColumns}
            selection={selection}
            selectionMode={SelectionMode.none}
            setKey="multiple"
            getKey={_getKey}
            onShouldVirtualize={() => false}
            data-is-scrollable="true"
            layoutMode={DetailsListLayoutMode.justified}
            onColumnHeaderClick={sorting}
            onItemInvoked={props._readListItem}
        />

This renders the list but with no groupings.