To keep single pane open always in React Accordion component

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
let clickEle;
class ReactApp extends React.Component {
    render() {
        this.clickEle = this.props.data;
        return (<AccordionComponent ref={acrdn => this.acrdnInstance = acrdn} expandMode='Single' clicked={this.clicked.bind(this)} expanding={this.expanding.bind(this)}>
            <AccordionItemsDirective>
              <AccordionItemDirective expanded='true' 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 MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.'/>
              <AccordionItemDirective header='JavaScript' content='JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.'/>
            </AccordionItemsDirective>
        </AccordionComponent>);
    }
    expanding(e) {
        if (this.acrdnInstance) {
            let expandCount = this.acrdnInstance.element.querySelectorAll('.e-selected').length;
            let ele = this.acrdnInstance.element.querySelectorAll('.e-selected')[0];
            if (ele) {
                ele = ele.firstChild;
            }
            if (expandCount === 1 && ele === this.clickEle) {
                e.cancel = true;
            }
        }
    }
    clicked(e) {
        this.clickEle = e.originalEvent.target.closest('.e-acrdn-header');
    }
}
ReactDOM.render(<ReactApp data={clickEle}/>, document.getElementById("element"));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import { ExpandEventArgs, AccordionClickArgs} from '@syncfusion/ej2-navigations';

let clickEle: HTMLElement;
class ReactApp extends React.Component<{}, {}> {
  public acrdnInstance:AccordionComponent;
  public clickEle;
  render() {
       this.clickEle = this.props.data;
       return (
        <AccordionComponent  ref={acrdn => this.acrdnInstance = acrdn}  expandMode='Single' clicked= {this.clicked.bind(this)}  expanding= {this.expanding.bind(this)}>
            <AccordionItemsDirective>
              <AccordionItemDirective expanded='true' 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 MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' />
              <AccordionItemDirective header='JavaScript' content= 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.' />
            </AccordionItemsDirective>
        </AccordionComponent>
       );
  }
  public expanding (e: ExpandEventArgs) {
  if (this.acrdnInstance) {
  let expandCount: number = this.acrdnInstance.element.querySelectorAll('.e-selected').length;
  let ele: HTMLElement= this.acrdnInstance.element.querySelectorAll('.e-selected')[0];
  if (ele) {
    ele = ele.firstChild as Element
  }
  if (expandCount === 1 && ele === this.clickEle) {
    e.cancel = true;
  } }
   }
  public clicked (e: AccordionClickArgs ) {
    this.clickEle = (e.originalEvent.target as Element).closest('.e-acrdn-header');
  }
}
ReactDOM.render(<ReactApp data={clickEle}/>, document.getElementById("element"));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Accordion 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" />
    <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%;
        }
    </style>
</head>

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