TypeError: var is null in animation.js when using it with ReactJS

Expected Behavior

Render PIE graph component without warnings and error in an React APP. I'm using a very simple wrapper called react-frappe-charts and as far researched has no impact in creating/solving this behavior.

Actual Behavior

React DevTools display an alert with the following TypeError

TypeError: a is null
animateSVG/<
src/js/utils/animation.js:81

  78 | let animElement, newElement;
  79 | 
  80 | element[0] = unit;
> 81 | [animElement, newElement] = animateSVGElement(...element);
     | ^  82 | 
  83 | newElements.push(newElement);
  84 | animElements.push([animElement, parent]);

Steps to Reproduce:

npx create-react-app frappe-typerror
cd frappe-typerror
npm i frappe-charts react-frappe-charts

edit src/App.js and add:

import ReactFrappeChart from "react-frappe-charts";
[...]
// in App() add the component:
  <ReactFrappeChart
    type="pie"
    colors={["#21ba45"]}
    data={{
      labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, 4] }]
    }}
  />

npm start
view in localhost:3000

My guess is that this happens due the reactional nature of the framework that re-renders a component multiple times and in the first render some REF is not created or being passed. In my tests the wrapper has no influence or control of this, the addition of two IF assertions in animation.js can easily solve the problem.

This issue is also discussed here. I know it is a DEV error only, but make developing with this framework unproductive I'll be create a PR later on, at the moment I'm using a patch to contour the problem.

Frappé Charts version: 1.5.6 React: 17.0.1 Codepen / Codesandbox: https://codesandbox.io/s/frappe-typeerror-0rs5p?file=/src/App.js

frappe / charts