title: TypeError: Cannot assign to read only property ... - Editing react-chartjs-2 datasets with Redux
body: <p>I'm a novice at React &amp; Redux, so excuse me if there is an easy solution to this - I'm not able to find one currently.</p>
  
  <p><a href="https://github.com/tervay/recalc" rel="nofollow noreferrer">I'm utilizing <code>react-chartjs-2</code> with Redux</a> to create some charts with dynamic data based on <code>&lt;input&gt;</code>s. The core of the chart code can be reduced down to:</p>
  
  <p><code>slice.js</code>:</p>
  
  <pre><code>export const flywheelSlice = createSlice({
    name: "flywheel",
    initialState: {
      windupTime: Qty(0, "s"),
      windupTimeChart: {
        options: {},
        data: [],
      },
    },
    reducers: {
      // . . .
      generateWindupTimeChartReducer: (state, action) =&gt; {
        // . . .
        const data = [];
        const getTime = (ratio) =&gt; {
          // return some data
        };
  
        for (let i = start; i &lt; end; i += step) {
          const time = getTime(i);
          if (time.scalar !== 0) {
            data.push({
              x: i,
              y: time.scalar,
            });
          }
        }
  
        state.windupTimeChart.data = _.orderBy(data, ["x"]);
        state.windupTimeChart.options = makeLineOptions(
          "Ratio vs Windup Time",
          "Ratio",
          "Windup Time"
        );
      },
    },
  });
  </code></pre>
  
  <p><code>Flywheel.js</code>:</p>
  
  <pre><code>  const chart = useRef(null);
    const windupTimeChart = useSelector((s) =&gt; s.flywheel.windupTimeChart);
    return (
          // . . .
          &lt;Line
              data={{
                datasets: [
                  {
                    data: windupTimeChart.data,
                    cubicInterpolationMode: "monotone",
                    fill: false,
                    borderColor: styles.primary,
                  },
                ],
              }}
              options={windupTimeChart.options}
              ref={chart}
            /&gt;
     );
  </code></pre>
  
  <p>I'm finding a very odd issue where updating data for one chart, updating data for another, and then updating data for the first one causes an error with read only data ... but not always.</p>
  
  <p>The stacktrace can be found here:</p>
  
  <pre><code>TypeError: Cannot assign to read only property 'length' of object '[object Array]'
      at Array.splice (&lt;anonymous&gt;)
      at http://localhost:3000/static/js/1.chunk.js:91796:22
      at Array.map (&lt;anonymous&gt;)
      at ChartComponent.updateChart (http://localhost:3000/static/js/1.chunk.js:91790:60)
      at ChartComponent.componentDidUpdate (http://localhost:3000/static/js/1.chunk.js:91661:10)
      at commitLifeCycles (http://localhost:3000/static/js/1.chunk.js:112255:26)
      at commitLayoutEffects (http://localhost:3000/static/js/1.chunk.js:115207:11)
      at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/1.chunk.js:92737:18)
      at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/1.chunk.js:92786:20)
      at invokeGuardedCallback (http://localhost:3000/static/js/1.chunk.js:92839:35)
      at commitRootImpl (http://localhost:3000/static/js/1.chunk.js:114949:13)
      at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
      at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
      at commitRoot (http://localhost:3000/static/js/1.chunk.js:114791:7)
      at finishSyncRender (http://localhost:3000/static/js/1.chunk.js:114208:7)
      at performSyncWorkOnRoot (http://localhost:3000/static/js/1.chunk.js:114194:11)
      at http://localhost:3000/static/js/1.chunk.js:103678:28
      at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
      at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
      at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/1.chunk.js:103673:11)
      at flushSyncCallbackQueue (http://localhost:3000/static/js/1.chunk.js:103661:7)
      at flushPassiveEffectsImpl (http://localhost:3000/static/js/1.chunk.js:115283:7)
      at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
      at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
      at flushPassiveEffects (http://localhost:3000/static/js/1.chunk.js:115224:16)
      at http://localhost:3000/static/js/1.chunk.js:115103:15
      at workLoop (http://localhost:3000/static/js/1.chunk.js:126954:38)
      at flushWork (http://localhost:3000/static/js/1.chunk.js:126910:20)
      at MessagePort.performWorkUntilDeadline (http://localhost:3000/static/js/1.chunk.js:126514:31)
  </code></pre>
  
  <p>which occurs here: <a href="https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L213" rel="nofollow noreferrer">https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L213</a></p>
  
  <p>I didn't want to create an issue right away within <code>react-chartjs-2</code> in case there was a workaround that I am missing.</p>