How to maintain expand/collapsed state of rows during page refresh in React TreeGrid?

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Inject, Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import { projectData } from './data';
import { SampleBase } from './sample-base';
export class SelfReference extends SampleBase {
  currentData = [];
  collapsed = (args) => {
    this.currentData.push(args.data);
    this.store(args);
    //storing collapsed record in local storage using setItem method
  };
  expanded = (args) => {
    this.currentData.push(args.data);
    this.store(args);
    //storing collapsed record in local storage using setItem method
  };
  store = (args) => {
    this.currentData.push(...this.treegrid.getCurrentViewRecords().filter((i) =>        i.hasChildRecords).filter((i) => !i.expanded));
    this.currentData = Array.from(new Set(this.currentData));
    window.localStorage.setItem( 'currentData', JSON.stringify(this.currentData));
  };
  dataBound = (args) => {
    if (this.treegrid.initialRender) {
      //checking whether it is initial rendering
      var data = JSON.parse(window.localStorage.getItem('currentData'));
      //retriving collapsed record in local storage using getItem method
      if (data) {
        var completeData = this.treegrid.grid.dataSource;
        var primaryKeyFieldName = this.treegrid.getPrimaryKeyFieldNames()[0];
        for (var i = 0; i < data.length; i++) {
          var value;
          for (var j = 0; j < completeData.length; j++) {
            if ( completeData[j][primaryKeyFieldName] == data[i][primaryKeyFieldName]
            ) {
              value = completeData[j];
            }
          }
          this.treegrid.collapseRow(null, value); 
          //collapsing row using collapseRow method
        }
        this.currentData = [];
        window.localStorage.setItem('currentData', JSON.stringify(this.currentData));
      }
    }
  };
 
  render() {
    return (
      <div className="control-pane">
        <div className="control-section">
          <TreeGridComponent
            dataSource={projectData}
            treeColumnIndex={1}
            ref={(g) => (this.treegrid = g)}
            height="350"
            allowPaging={true}
            idMapping="TaskID"
            parentIdMapping="parentID"
            dataBound={this.dataBound.bind(this)}
            collapsed={this.collapsed.bind(this)}
            expanded={this.expanded.bind(this)}
            enablePersistence="true"
          >
            <ColumnsDirective>
              <ColumnDirective field="TaskID" isPrimaryKey={true} headerText="Task ID"
                width="70" textAlign="Right" />
              <ColumnDirective field="TaskName" headerText="Task Name" width="100" />
              <ColumnDirective field="StartDate" headerText="Start Date"
                editType="datepickeredit" width="90" format="yMd" textAlign="Right" />
              <ColumnDirective field="EndDate" headerText="End Date" width="90"
                format="yMd" editType="datepickeredit" textAlign="Right" />
              <ColumnDirective field="Duration" headerText="Duration" width="90"
                textAlign="Right" />
              <ColumnDirective field="Progress" headerText="Progress" width="90"
                textAlign="Right" />
            </ColumnsDirective>
            <Inject services={[Page, Edit, Toolbar]} />
          </TreeGridComponent>
        </div>
      </div>
    );
  }
}
 
render(<SelfReference />, document.getElementById('sample'));