Doughnut - change in data does not sync with legend state when mutable method not used

### Expected behavior

When data is removed, the hidden state should also be removed for that item

### Current behavior

hidden state remain the same and applied to the next item in the array

### Reproducible sample

https://codesandbox.io/s/fragrant-framework-x8m8y?file=/App.tsx

### Optional extra steps/info to reproduce

https://user-images.githubusercontent.com/33093657/152123594-17ea0628-ca76-4b55-b0bb-20fb6c1e63d1.mp4

### Possible solution

_No response_

### Context

### **I need the ability to pass new data directly to the chart without legend state going out of sync**

I have a use case where I delete data in a component that does not have access to chart visualization and the other component shows the visualization (Doughnut chart) and it receives data via props. In this case, it creates a sync problem because I am not using the mutable methods and passing new data directly to the chart

### chart.js version

v3.7.0

### Browser name and version

_No response_

### Link to your project

https://codesandbox.io/s/fragrant-framework-x8m8y?file=/App.tsx