React table 多表头如何实现

问题遇到的现象和发生背景

多层级的表头可以通过child实现，但是这种不知道如何实现

问题相关代码，请勿粘贴截图
import React, { Component } from 'react'

export default class App extends Component {
    a = 100
    render() {
        return (
            <div>
                <label htmlFor="username">用户名</label>
                <input></input>
                <button onClick={() => {
                    console.log("click", "如果处理逻辑过多不推荐", this.a)
                }}>add</button>
                <button onClick={this.handleClick2}>add2</button>
                {/* //this绑定 改变this指向 不推荐*/}
                <button onClick={this.handleClick2.bind(this)}>add2 不推荐</button>
                <button onClick={this.handleClick3}>add3 推荐</button>
                <button onClick={() => {this.handleClick4()}}>add4 比较推荐 传参方便</button>
            </div>
        )
    }
    //函数被谁调用this指向谁，此处被button事件系统调用，指向undefined
    handleClick2() {
        console.log("handleclick",this)
    }
    //箭头函数 保持this指向外部调用者
    handleClick3 = (evt) => {
        console.log("click3333",this.a,evt)
    }

    handleClick4 = () => {
        console.log("clic44")
    }
}
运行结果及报错内容

功能实现不了

我的解答思路和尝试过的方法

我现在没有思路

我想要达到的结果

这是我想要的效果，让做成这样，之前没有学过前端，希望给与帮助

img