如何在用于react的ag-grid中的现有列标题下添加列标题

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const columnDefs = [
  { headerName: '列1', field: 'field1', width: 100 },
  { headerName: '列2', field: 'field2', width: 150 },
  // 其他列定义...
];

render() {
  return (
    <div className="ag-theme-alpine" style={{ height: '300px', width: '100%' }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
}

const columnDefs = [
  {
    headerName: '基本信息',
    children: [
      { headerName: '列1', field: 'field1', width: 100 },
      { headerName: '列2', field: 'field2', width: 150 },
    ],
  },
  {
    headerName: '其他信息',
    children: [
      { headerName: '列3', field: 'field3', width: 120 },
      { headerName: '列4', field: 'field4', width: 130 },
    ],
  },
];