SPFX-Chart-webpart-react-pnpcontrol

I am having a spfx webpart where it shows a chart view based on the List selected in property pane. I can able to generate the chart but while changing the list the second chart data shows the prev chart data on hover.The below code is on render method in .tsx file

<ChartControl                  
        type={ChartType.Bar}                   
         data promise={this._data()}                      
         options={{
         legend: {
         display: true,
         position: "right",                
         },
         title: {
         display: true,
         text: "My Chart Data"
         },  
         }} />

The _data() method will be as below,

let Chart:Chart;
Chart.ChartData = {
    labels: ['Income','Expense','Debt','Savings'],
    datasets: [{
      label: 'Archive',
      data: [10,13,20,90]          
    }]
  };

I have tried to implement,

Chart.destroy()/Chart.clear()

but not working.It shows error and get rejected saying the Chart is un definded.

How to clear the old data,while loading next list in this scenario.

Chart.datasets.pop();

Using this line in the code will empty the datasets, hence the new data will be added and hovering the chart will not show old data.