my requirement is i have to display 4 list separately under collapsable panel but the problem is, I am not able to segregate the list , is there any way? help me.

export interface IMyWorkListState {   items: [     {       "Title": "",       "Due_x0020_Date": "",       "Status": "",      }]   ,  }  export default class MyWorkList extends React.Component<IMyWorkListProps, IMyWorkListState>  {   count: number = 1;   flag: boolean = true;    public constructor(props: IMyWorkListProps, state: IMyWorkListState) {      super(props);      this.state = {        items: [          {            "Title": "",           "Due_x0020_Date": "",           "Status": "",          }        ]      };    }     public componentDidMount() {       var reactHandler = this;     var listname = ["Asset Approval", "RemoteLists", "testList", "documentList"];      var i = 0;     var itemArrays = [];     var Listitemcount = [];     var feedPromises = [];     for (let index = 0; index < listname.length; index++) {       //start the process to get all the feeds and save their ajax promises into an array       feedPromises.push(getListData(listname[index]));     }     function getListData(ListName) {        //alert("getfeed ")       return jquery.ajax({         url: reactHandler.props.siteUrl + "/_api/web/lists/getbytitle('" + ListName + "')/items",          type: "GET",          headers: { 'Accept': 'application/json; odata=verbose;' },          success: function (resultData) {            itemArrays[i] = resultData.d.results;            ++i;          },          error: function (jqXHR, textStatus, errorThrown) {          }       });     }     var listData;     var flag = true;     // wait until all the feeds return data to continue     jquery.when.apply(this, feedPromises)       .done(function () {         // when all the data calls are successful you can access the data via          for (let index = 0; index < listname.length; index++) {           if (flag) {             listData = itemArrays[index]             flag = false;           } else {             listData = listData.concat(itemArrays[index])           }           }         reactHandler.setState({            items: listData          });          //this.OlistData=listData       });   }  public render(): React.ReactElement<IMyWorkListProps> {  return (    <div className="container-fluid">      <div className={styles.tableCaptionStyle} >Dashboard MyWorkList  </div>      <Collapsible trigger="Start here"   >        <table className="table table-hover"   >         <thead>           <tr>              <th>Title</th>             <th>Due Date</th>             <th>Status</th>           </tr>         </thead>          {this.state.items.map(function (item, key) {             return (<tbody key={key}>              <tr>                <td>{item.Title}</td>               <td>{item.Due_x0020_Date}</td>               <td>{item.Status}</td>             </tr>            </tbody>);          })}        </table>      </Collapsible>     </div>  );  } }