Render other components in Accordion using template in React Accordion component

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-react-calendars';
export class App extends React.Component {
    constructor() {
        super(...arguments);
        this.continents = [
            {
                code: 'AF', name: 'Africa', countries: [
                    { code: 'NGA', name: 'Nigeria' },
                    { code: 'EGY', name: 'Egypt' },
                    { code: 'ZAF', name: 'South Africa' }
                ]
            },
            {
                code: 'AS', name: 'Asia', expanded: true, countries: [
                    { code: 'CHN', name: 'China' },
                    { code: 'IND', name: 'India', selected: true },
                    { code: 'JPN', name: 'Japan' }
                ]
            },
            {
                code: 'EU', name: 'Europe', countries: [
                    { code: 'DNK', name: 'Denmark' },
                    { code: 'FIN', name: 'Finland' },
                    { code: 'AUT', name: 'Austria' }
                ]
            },
            {
                code: 'NA', name: 'North America', countries: [
                    { code: 'USA', name: 'United States of America' },
                    { code: 'CUB', name: 'Cuba' },
                    { code: 'MEX', name: 'Mexico' }
                ]
            },
            {
                code: 'SA', name: 'South America', countries: [
                    { code: 'BRA', name: 'Brazil' },
                    { code: 'COL', name: 'Colombia' },
                    { code: 'ARG', name: 'Argentina' }
                ]
            },
            {
                code: 'OC', name: 'Oceania', countries: [
                    { code: 'AUS', name: 'Australia' },
                    { code: 'NZL', name: 'New Zealand' },
                    { code: 'WSM', name: 'Samoa' }
                ]
            },
            {
                code: 'AN', name: 'Antarctica', countries: [
                    { code: 'BVT', name: 'Bouvet Island' },
                    { code: 'ATF', name: 'French Southern Lands' }
                ]
            },
        ];
        this.field = { dataSource: this.continents, id: 'code', text: 'name', child: 'countries' };
    }
    render() {
        let headertext;
        function contentTemplate1() {
            return (<ButtonComponent>Click me</ButtonComponent>);
        }
        function contentTemplate2() {
            return (<DatePickerComponent></DatePickerComponent>);
        }
        function contentTemplate3() {
            return (<CalendarComponent></CalendarComponent>);
        }
        function contentTemplate4() {
            return (<TreeViewComponent fields={this.field}></TreeViewComponent>);
        }
        return (<div id='container'>
    <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Button' content={contentTemplate1}/>
          <AccordionItemDirective header='DatePicker' content={contentTemplate2}/>
          <AccordionItemDirective header='Calendar' content={contentTemplate3}/>
          <AccordionItemDirective header='Treeview' content={contentTemplate4.bind(this)}/>
        </AccordionItemsDirective>
    </AccordionComponent>
    </div>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import {TreeViewComponent} from '@syncfusion/ej2-react-navigations';
import { DatePickerComponent ,CalendarComponent} from '@syncfusion/ej2-react-calendars';


export class App extends React.Component<{}, {}> {

  public continents: { [key: string]: Object }[] = [
{
    code: 'AF', name: 'Africa', countries: [
        { code: 'NGA', name: 'Nigeria' },
        { code: 'EGY', name: 'Egypt' },
        { code: 'ZAF', name: 'South Africa' }
    ]
},
{
    code: 'AS', name: 'Asia', expanded: true, countries: [
        { code: 'CHN', name: 'China' },
        { code: 'IND', name: 'India', selected: true },
        { code: 'JPN', name: 'Japan' }
    ]
},
{
    code: 'EU', name: 'Europe', countries: [
        { code: 'DNK', name: 'Denmark' },
        { code: 'FIN', name: 'Finland' },
        { code: 'AUT', name: 'Austria' }
    ]
},
{
    code: 'NA', name: 'North America', countries: [
        { code: 'USA', name: 'United States of America' },
        { code: 'CUB', name: 'Cuba' },
        { code: 'MEX', name: 'Mexico' }
    ]
},
{
    code: 'SA', name: 'South America', countries: [
        { code: 'BRA', name: 'Brazil' },
        { code: 'COL', name: 'Colombia' },
        { code: 'ARG', name: 'Argentina' }
    ]
},
{
    code: 'OC', name: 'Oceania', countries: [
        { code: 'AUS', name: 'Australia' },
        { code: 'NZL', name: 'New Zealand' },
        { code: 'WSM', name: 'Samoa' }
    ]
},
{
    code: 'AN', name: 'Antarctica', countries: [
        { code: 'BVT', name: 'Bouvet Island' },
        { code: 'ATF', name: 'French Southern Lands' }
    ]
},
];
private field: object = { dataSource: this.continents, id: 'code', text: 'name', child: 'countries' }

  render() {
  let headertext: any;
 function contentTemplate1(): JSX.Element {
return(<ButtonComponent>Click me</ButtonComponent>);
  }
  function contentTemplate2(): JSX.Element {
return(<DatePickerComponent></DatePickerComponent>);
  }
  function contentTemplate3(): JSX.Element {
return( <CalendarComponent ></CalendarComponent>);
  }
 function contentTemplate4(): JSX.Element {
return(  <TreeViewComponent fields={this.field}></TreeViewComponent>);
  }
return (
    <div id='container'>
    <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Button'  content= { contentTemplate1 } />
          <AccordionItemDirective header='DatePicker'  content= { contentTemplate2 } />
          <AccordionItemDirective header='Calendar'  content= { contentTemplate3 } />
          <AccordionItemDirective header='Treeview'  content= { contentTemplate4.bind(this) } />
        </AccordionItemsDirective>
    </AccordionComponent>
    </div>
);
  }
}

ReactDOM.render(<App />, document.getElementById("element"));

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

<head>
    <title>Syncfusion React Tab</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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
            <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>