все данные, отображаемые под столбцом в разных строках, отображаются в одной ячейке

Question

Я хотел таблицу, использующую пакет реагирующих таблиц, чтобы столбцы добавлялись пользователем через выпадающий список. Заголовок каждого столбца будет иметь другой выпадающий список, который будет определять, какие данные должны отображаться в этом конкретном столбце. Таким образом, когда пользователь выбирает опцию из заголовка столбца, соответствующие данные должны быть заполнены в этом конкретном столбце.

До сих пор я мог достигать добавления столбцов и предоставления второго раскрывающегося списка для заполнения столбца, но когда пользователь выбирает параметр из раскрывающегося списка заголовка, данные, отображаемые под столбцом в разных строках, добавляются в одну и ту же ячейку. Пожалуйста, помогите.

import React, { Component } from 'react';
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

export default class TableForData extends Component {
    constructor(){
        super()
        this.state={
            typeDropDown:false,
            types:[
                {
                name:"company",
                value:[{
                        "name":"no_of_emp",
                        "value":{"1": 200, "2":321, "3":232, "4":211,"5":122}
                    },{
                        "name":"no_of_projects",
                        "value":{"1": 100, "2":221, "3":132, "4":41,"5":22}
                    },{
                        "name":"no_of_dept",
                        "value":{"1": 48, "2":31, "3":132, "4":51,"5":22}
                    }]
                },
                {
                    name:"college",
                    value:[{
                        "name":"no_of_students",
                        "value":{"1": 100, "2":321, "3":432, "4":211,"5":122}
                    },{
                        "name":"no_of_teachers",
                        "value":{"1": 400, "2":221, "3":272, "4":211,"5":192}
                    },{
                        "name":"no_of_subjects",
                        "value":{"1": 50, "2":32, "3":32, "4":11,"5":32}
                    }]
                }
        ],
            addedColumns:[],
            selectedCol:''
        }
    }
    handleTypeDropDown=()=>{
        this.setState({
            typeDropDown:!this.state.typeDropDown
        })
    }
    handleColumnAdding=(type)=>{
        this.setState({
            addedColumns:this.state.addedColumns.concat(type)
        })
    }

    selected=(e)=>{
        this.setState({
            selectedCol:e.target.value
        })
    }
   findData=(x)=>{
    let arr=[]
       for(let i of this.state.addedColumns){
            for(let j in i){
                if(j==="value"){
                    for(let k of i[j]){
                        for(let l in k){
                           if(k[l]===x){
                              arr= Object.keys(k["value"]).map((key) =>{
                                   return k["value"][key]
                                        // return key
                               }                            
                              )                           
                           }
                        }
                    }
                }                
             }
        }
        return arr
   }
    render() {
        return (
            <div>
            <Dropdown className="type-dropdown" isOpen={this.state.typeDropDown} toggle={this.handleTypeDropDown}>
                <DropdownToggle className="type-dropdown" >
                    Select Type
                </DropdownToggle>
            <DropdownMenu className="type-dropdown" >
            {
                this.state.types.map((type)=>{
                    return  <DropdownItem className="type-dropdown" value={type.name} onClick={()=>{this.handleColumnAdding(type)}}>{type.name}</DropdownItem>
                })
            }
      </DropdownMenu>
    </Dropdown>
        <div className="container">
        {(this.state.addedColumns.length) ?
            <ReactTable
            className="data-table"
            title=""
            columns= {this.state.addedColumns.map((c)=>{
                    return  {
                        Header: <select onChange={this.selected}>
                                    <option>{c.name}</option>
                                { c.value.map((d)=>{
                            return <option value={d.name}>{d.name}</option>
                    })}
                </select>
                 ,
                 id:c.name,
            //    accessor: this.findData(this.state.selectedCol)
                    Cell: this.findData(this.state.selectedCol)

                  }
                })
            }

        data={this.state.addedColumns}
      />

    :
      null}
        </div>
            </div>
        );
    }
}