How to show the spinner in React Grid while binding custom data source?

import { render } from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Group, Sort, Inject } from '@syncfusion/ej2-react-grids';
import { Ajax } from '@syncfusion/ej2-base';
import { setSpinner, createSpinner, showSpinner } from '@syncfusion/ej2-react-popups';
export class CustomBinding extends SampleBase {
    constructor() {
        super(...arguments);
        this.orderService = new OrderService();
    }
    created() {
        let spinnerTarget = document.querySelector('#customSpinner');
        createSpinner({ target: spinnerTarget, width: '20px' });
        showSpinner(spinnerTarget);
    }
 
    dataStateChange(state) {
      this.orderService.execute(state).then((gridData) => {
        this.grid.dataSource = gridData;
        document.querySelector('.e-spinner-pane').style.display = "none";
      });
    }
 
    render() {
        return (<div className='control-pane'>
            <div id='customSpinner'></div>
            <div className='control-section'>
                <GridComponent dataSource={this.data} ref={g => this.grid = g} allowPaging={true} allowSorting={true} pageSettings={{ pageCount: 4, pageSize: 10 }} created={this.created.bind(this)} allowGrouping={true} dataStateChange={this.dataStateChange.bind(this)}>
                    <ColumnsDirective>
                        <ColumnDirective field='OrderID' headerText='Order ID' width='120'></ColumnDirective>
                        <ColumnDirective field='CustomerID' headerText='Customer Name' width='150'></ColumnDirective>
                        <ColumnDirective field='ShipName' headerText='Ship Name' width='120' />
                        <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
                    </ColumnsDirective>
                    <Inject services={[Page, Group, Sort]} />
                </GridComponent>
            </div>
        </div>);
    }
}