Load accordion items dynamically in React Accordion component

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-react-navigations';
// @ts-ignore
import { accordion } from '../datasource.tsx';
let dbFlag = 0;
let dynamciAcrdnCount = 2;
export class ReactApp extends React.Component {
    render() {
        return (<div className='control-pane'>
    <div className='control-section accordion-control-section'>
      <div className='control Accordion-sample'>
      
        <AccordionComponent expanded={this.expanded.bind(this)} ref={acrdn => this.acrdnInstance = acrdn}>
          <AccordionItemsDirective>
            <AccordionItemDirective header='ASP.NET' content='Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.'/>
            <AccordionItemDirective header='ASP.NET Core' content='ASP.NET Core is a free and open-source web framework, and the next generation of ASP.NET, developed by Microsoft and the community. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET Core.'/>
            <AccordionItemDirective header='ASP.NET MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.'/>
          </AccordionItemsDirective>
        </AccordionComponent>
      </div></div>
  </div>);
    }
    expanded(e) {
        let Elementindex = document.getElementsByClassName("e-expand-state e-selected e-active")[0];
        if ([].slice.call(e.element.parentElement.children).indexOf(e.element) == [].slice.call(e.element.parentElement.children).indexOf(Elementindex)) {
            let array = accordion;
            for (let i = 0; i < dynamciAcrdnCount; i++) {
                if (dbFlag === array.length) {
                    return;
                }
                this.acrdnInstance.addItem(array[dbFlag], this.acrdnInstance.items.length);
                ++dbFlag;
            }
        }
    }
}
ReactDOM.render(<ReactApp />, document.getElementById('sample'));

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective, ExpandEventArgs, AccordionItemModel } from '@syncfusion/ej2-react-navigations';
// @ts-ignore
import { accordion } from '../datasource.tsx';

let dbFlag: number = 0;
let dynamciAcrdnCount: number = 2;
export class ReactApp extends React.Component<{}, {}> {

  acrdnInstance: AccordionComponent | any;
  render() {
return (
  <div className='control-pane'>
    <div className='control-section accordion-control-section'>
      <div className='control Accordion-sample'>
      {/* Render the Accoridon Component */}
        <AccordionComponent expanded= {this.expanded.bind(this)} ref={acrdn => this.acrdnInstance = acrdn}>
          <AccordionItemsDirective>
            <AccordionItemDirective header='ASP.NET' content='Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.' />
            <AccordionItemDirective header='ASP.NET Core' content='ASP.NET Core is a free and open-source web framework, and the next generation of ASP.NET, developed by Microsoft and the community. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET Core.' />
            <AccordionItemDirective header='ASP.NET MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' />
          </AccordionItemsDirective>
        </AccordionComponent>
      </div></div>
  </div>

);
  }
  public expanded (e: ExpandEventArgs) {
    let Elementindex = document.getElementsByClassName("e-expand-state e-selected e-active")[0];
    if([].slice.call((e.element as any).parentElement.children).indexOf(e.element) == [].slice.call((e.element as any).parentElement.children).indexOf(Elementindex)) {
      let array: AccordionItemModel[] = accordion as AccordionItemModel[];
      for(let i: number = 0 ; i < dynamciAcrdnCount; i++)
      {
        if (dbFlag === array.length) {
            return; }
        this.acrdnInstance.addItem( array[dbFlag] , this.acrdnInstance.items.length );
        ++dbFlag;
      }
    }
  }
}
ReactDOM.render(<ReactApp />, document.getElementById('sample'));

<!DOCTYPE html>
<html>
<head>
    <title>Syncfusion React Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .accordion-control-section {
            margin: 0 10% 0 10%;
        }
        
        @media screen and (max-width: 768px) {
            .accordion-control-section {
                margin: 0;
            }
        }
    </style>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>