reactjs - React Table (Tanstack) aplicar classe ao elemento th condicionalmente

Estou a usar @tanstack/react-table v8.5.13. Estou a tentar fazer algo realmente simples aqui, mas parece que não encontro nenhuma forma de o fazer na documentação.

A minha tabela tem dois cabeçalhos (um cabeçalho e um subcabeçalho definidos abaixo)

const columnHelper = createColumnHelper<ITableData>();

const columns = [
  columnHelper.group({
    id: 'Header',
    header: () => <Button variant='outlined'>Show all</Button>,
    columns: [
      columnHelper.accessor('header_sublevel', {
        header: () => <span>Secondary Header</span>,
        cell: (info) => info.getValue()
      })
    ]
  })
];

Estou a renderizar os dados fazendo isto.

export default function MyTableComponent {
  const data = useAppSelector(state => state.table.data);
  const table = useReactTable<IListPrice>({
    data: listPriceData,
    columns,
    getCoreRowModel: getCoreRowModel()
  });

  return (
    <div
      ref={virtualizedTableContainerRef}
      style={{ padding: '1rem' }}
      className='virtualized-table-container'
    >
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  colSpan={header.colSpan}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(header.column.columnDef.header, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
            </tr>
          ))}
        </tbody>
        <tfoot>
          {table.getFooterGroups().map((footerGroup) => (
            <tr key={footerGroup.id}>
              {footerGroup.headers.map((header) => (
                <th key={header.id} colSpan={header.colSpan}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(header.column.columnDef.footer, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
      <div className='h-4' />
    </div>
  );

O que eu quero? Estou a tentar adicionar uma classe à segunda linha de elementos th para os estilizar. Abaixo está o que é gerado no código HTML.

O que tentei até agora? Uma solução em que pensei é que, dependendo da profundidade dos cabeçalhos, eu poderia aplicar uma classe, mas parece exagerado. Alguma opinião?

Não existe um método getHeaderProps disponível no header, que costumava estar disponível na v7 do react-table. Ele foi movido ou removido na v8?