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
];