react-table : Add a select (checkboxes) column with a headergroup - react-table

Question

For aesthetic reasons I'm trying to add a HeaderGroup to the "select" (checkboxes) column solution provided in react-teable examples.
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,
]
})
Source:
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink
I've tried many ways using hooks object but none of them worked (for example nested calls to hooks.headerGroups.push and then hooks.visibleColumns.push).
Here is my last attempt which makes sense but doesn't work either (TypeError: Cannot read property 'forEach' of 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
]
})
})
Thank you for your help ^^