树选择三级联动类似地区选择组件

需求是一个权限控制的树选择框

乍一看其实挺简单的，对于大佬来说也挺简单的，可惜我是个菜鸡。
首先就先写一下整体结构

	<div className={s.changeRole}>
        <div className={s.boxOne}>//这里计算一下盒子的宽度，等分一下就可以了
          <p>一级菜单</p>//给p一个高度，加一个底边框就有上图的效果了
          	<div className={s.content}>
          		<Checkbox.Group  options={optionsArr} //options就是所有要展示的值，label和value
                value={defaultOne} //这里value是id就存id是name就存name   这里的defaultValue和value我是没弄懂的  写defaltValue是不会默认选中的，改成value之后change的时候要改变当前的默认值的数据，应该是可控组件和非控组件的区别
               onChange={this.onChange}/>//这里用的antd的组件
         	</div>
        </div>
        <div style={
  {lineHeight:'150px'}}>
          <img src={IconRight} alt="" style={
  {height:'20px'}}/>//这里是图中向右的箭头
        </div>
        <div className={s.boxTwo}>
          <p>二级菜单</p>
          <div className={s.content}>
            <Checkbox.Group  options={optionsArr} 
                value={defaultOne}
                onChange={
       this.onChangeTwo}></Checkbox.Group>
          </div>
        </div>
        <div style={
  {lineHeight:'150px'}}>
          <img src={IconRight} alt="" style={
  {height:'20px',lineHeight:'150px'}} />
        </div>
        <div className={s.boxThree}>
          <p>三级菜单及按钮</p>
          <div className={s.content}>
            <Checkbox.Group  options={optionsArr} 
                value={defaultOne}
                onChange={
       this.onChangeThree}></Checkbox.Group>
          </div>
        </div>
      </div>

.changeRole{
   
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: