How to use the DropDownButton component in office fabric UI modal

import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 
import { Modal } from 'office-ui-fabric-react/lib/Modal';
import { getId } from 'office-ui-fabric-react/lib/Utilities';
import * as React from 'react';
 
export interface IModalBasicExampleState {
    showModal: boolean;
}
 
class App extends React.Component {
    public state: IModalBasicExampleState = {
        showModal: false
    };
 
    public items: ItemModel[] = [
        {
            text: 'Dashboard',
        },
        {
            text: 'Notifications',
        },
        {
            text: 'User Settings',
        },
        {
            text: 'Log Out',
        }];
    private titleId: string = getId('title');
    private subtitleId: string = getId('subText');
    public render() {
        return (
            <div className="App">
 
                <Modal
                    titleAriaId={this.titleId}
                    subtitleAriaId={this.subtitleId}
                    isOpen={this.state.showModal}
                    onDismiss={this.closeModal}
                    isClickableOutsideFocusTrap={true}
                    isBlocking={true}
                    containerClassName="ms-modalExample-container">
 
                    <div className="ms-modalExample-header">
                        <p>
                            <span id={this.titleId}>Modal dialog</span></p>
                    </div>
                    <div id={this.subtitleId} className="ms-modalExample-body">
                        <p>
                            <DefaultButton onClick={this.closeModal} text="Close" /></p>
                        <p>The DropDownButton component is used to toggle contextual overlays for displaying list of action items. It can contain both text and images. In this sample, DropDownButton contains content and list of action items.</p>
                        <p> Sample Demo:   <DropDownButtonComponent select={this.onSelect} items={this.items} beforeOpen={this.onBeforeOpen} cssClass='e-caret-hide'>Profile</DropDownButtonComponent>
                        </p>
                    </div>
                </Modal>
                <p>
                    <DefaultButton secondaryText="Opens the Sample Modal" onClick={this.showModal} text="Open Modal" /></p>
            </div>
        );
    }
    public onSelect(): void {
        alert("Select event is triggered");
    }
    public onBeforeOpen(): void {
        alert("beforeOpen event is triggered");
    }
    private showModal = (): void => {
        this.setState({ showModal: true });
    };
 
    private closeModal = (): void => {
        this.setState({ showModal: false });
    };
}
 
export default App;