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>