How to Merge Headers in tanstack/react-table

I’m working with @tanstack/react-table in a React app and trying to merge headers for a specific column like the example in the screenshot I posted. I want to merge the ones I circled green.

Here’s a screenshot of my current table where I want to merge the headers:

And here is my component table header:

   <thead className="bg-[#F7F7F8]">
      {table.getHeaderGroups().map((headerGroup) => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map((header) => (
            <th
              key={header.id}
              colSpan={header.colSpan}
              className={`border border-[#F1F1F3] p-2 text-base font-semibold text-[#171719] ${header.colSpan > 1 ? 'text-center' : 'text-center'}`}
              style={{ width: header.column.columnDef.size ? `${header.getSize()}px` : 'auto' }}
            >
              {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
            </th>
          ))}
        </tr>
      ))}
    </thead>

And here is my current column configuration:

import { createColumnHelper } from '@tanstack/react-table';
import type { ColumnDef } from '@tanstack/react-table';

type Data = {
  검수: string;
  시도명: string;
  시군구명: string;
  읍면동명: string;
  합계: { 계: number; 남: number; 여: number };
  '10대': { 계: number; 남: number; 여: number };
  // Add dummy data for other groups
};

const columnHelper = createColumnHelper<Data>();

const columns: ColumnDef<Data, any>[] = [
  columnHelper.accessor('검수', {
    header: '검수',
    size: 50,
  }),
  columnHelper.accessor('시도명', {
    header: '시도명',
    size: 100,
  }),
  columnHelper.accessor('시군구명', {
    header: '시군구명',
    size: 100,
  }),
  columnHelper.accessor('읍면동명', {
    header: '읍면동명',
    size: 100,
  }),
  columnHelper.group({
    header: '합계',
    columns: [
      columnHelper.accessor('합계.계', {
        header: '계',
        size: 100,
      }),
      columnHelper.accessor('합계.남', {
        header: '남',
        size: 100,
      }),
      columnHelper.accessor('합계.여', {
        header: '여',
        size: 100,
      }),
    ],
  }),
  // Repeat for group
];