react-table: добавить столбец выбора (флажки) с группой заголовков

Question

По эстетическим причинам я пытаюсь добавить HeaderGroup в решение столбца "select" (флажки), представленное в примерах с возможностью реагирования.

hooks => {
  hooks.visibleColumns.push(columns => {
    return [
      {
        id: 'selection',
        // Make this column a groupByBoundary. This ensures that groupBy columns
        // are placed after it
        groupByBoundary: true,
        // The header can use the table's getToggleAllRowsSelectedProps method
        // to render a checkbox
        Header: ({ getToggleAllRowsSelectedProps }) => (
          <div>
            <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
          </div>
        ),
        // The cell can use the individual row's getToggleRowSelectedProps method
        // to the render a checkbox
        Cell: ({ row }) => (
          <div>
            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
          </div>
        ),
      },
      ...columns,
    ]
  })

Источник:https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink

Я пробовал много способов использовать объект хуков, но ни один из них не работал (например, вложенные вызовы hooks.headerGroups.push, а затем hooks.visibleColumns.push).

Вот моя последняя попытка, которая имеет смысл, но тоже не работает (TypeError: невозможно прочитать свойство forEach из undefined):

   hooks => {
        hooks.headerGroups.push(headerGroups => {
            return [
                {
                    Header: 'X',

                    columns: [
                        {
                            id: 'selection',
                            // Make this column a groupByBoundary. This ensures that groupBy columns
                            // are placed after it
                            groupByBoundary: true,
                            // The header can use the table's getToggleAllRowsSelectedProps method
                            // to render a checkbox
                            Header: ({ getToggleAllRowsSelectedProps }) => (
                                <div>
                                    <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
                                </div>
                            ),
                            // The cell can use the individual row's getToggleRowSelectedProps method
                            // to the render a checkbox
                            Cell: ({ row }) => (
                                <div>
                                    <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
                                </div>
                            ),
                        }
                    ]
                },
                ...headerGroups
            ]
        })
    })

Спасибо за помощь ^^