how to use on multy children header

[angleneo]

`import React, { useState } from 'react';
import './index.less';
import { ProTable } from '@ant-design/pro-components';
import { Resizable } from 'react-resizable';
const ResizableTitle = (props) => {
const { onResize, width, ...restProps } = props;
if (!width) {
return <th {...restProps} />;
}
return (
<Resizable
width={width}
height={0}
handle={
<span
className="react-resizable-handle"
onClick={(e) => {
e.stopPropagation();
}}
/>
}
onResize={onResize}
draggableOpts={{
enableUserSelectHack: false,
}}
>
<th {...restProps} />

);
};
const App = () => {
const [columns, setColumns] = useState([
{
title: 'Date',
dataIndex: 'date',
width: 200,
},
{
title: 'Amount',
dataIndex: 'amount',
width: 100,
sorter: (a, b) => a.amount - b.amount,
},
{
title: '信息',
// width: 300,
children: [
{
title: '年龄1',
dataIndex: ['type', 'age'],
key: 'age',
// minWidth: 100
width: 120,
// render: (a, b) => {
// return

{b?.age}

// }
},
{
title: '地址',
dataIndex: ['type', 'address'],
key: 'address',
// minWidth: 100
// width: 120,
// render: (a, b) => {
// return

{b?.address}

// }
},
],
},
{
title: 'Note',
dataIndex: 'note',
// width: 100,
},
{
title: 'Action',
key: 'action',
render: () => Delete,
},
]);
const data = [
{
key: 0,
date: '2018-02-11',
amount: 120,
type: {
key: '111',
age: 10,
address: 'addd'
},
note: 'transfer',
},
{
key: 1,
date: '2018-03-11',
amount: 243,
type: {
key: '222',
age: 10,
address: 'cccc'
},
note: 'transfer',
},
{
key: 2,
date: '2018-04-11',
amount: 98,
type: {
key: 'dddd',
age: 10,
address: 'addd'
},
note: 'transfer',
},
];
// const handleResize =
// (index) =>
// (_, { size }) => {
// console.log('index', index, _, size)
// const newColumns = [...columns];
// newColumns[index] = {
// ...newColumns[index],
// width: size.width,
// };
// setColumns(newColumns);
// };
const handleResize = (index, int) => (e, { size }) => {
console.log('index', index, int)
// setColumns(prevColumns => {
// const newColumns = [...prevColumns];

//   // 如果有父索引，处理子列
//   if (parentIndex !== null) {
//     console.log('ddd', index, parentIndex)
//     // const newChildren = [...newColumns[parentIndex].children];
//     // newChildren[index] = { ...newChildren[index], width: size.width };
//     // newColumns[parentIndex] = { ...newColumns[parentIndex], children: newChildren };
//     newColumns[index] = { ...newColumns[index], width: size.width };
//   } else {
//     // 处理非子列
//     newColumns[index] = { ...newColumns[index], width: size.width };
//   }

//   return newColumns;
// });
// const newColumns = [...columns];
// newColumns[index] = {
//   ...newColumns[index],
//   width: size.width,
// };
// setColumns(newColumns);

};

const mapColumns = (columns) => {
return columns.map((col, index) => {
console.log('col', col)
const newCol = {
...col,
onHeaderCell: (column) => {
// console.log('cccc', column)
return {
width: column.width,
onResize: handleResize(index),
}
},
};

  // 如果列有子列，递归处理
  if (col.children && col.children.length > 0) {
    newCol.children = mapColumns(col.children);
    newCol.children.map((val, int) => val.index = int)
  }

  return newCol;
});

};

const mappedColumns = mapColumns(columns);
return (
<ProTable
bordered
components={{
header: {
cell: ResizableTitle,
},
}}
columns={mappedColumns}
dataSource={data}
/>
);
};
export default App;`

how to use on multy children table （如何在多级表头的情况下使用）.