我已经在一个.json文件中保存了100组维恩图数据，我正在使用React，Highcharts和官方的highcharts-react Package 器，让用户使用一个简单的滑块在每个维恩图之间转换。

import data from "./data/venns.json";

import { useState } from "react";

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";   
import vennModule from "highcharts/modules/venn";
vennModule(Highcharts);

function App() {

  const [userPercent, setUserPercent] = useState(1);

  const vennData = data[userPercent]; // ref the imported .json file

  const formattedVennData = [
    {
      sets: ["baseline"],
      value: vennData[5].size,
    },
    {
      sets: ["ours"],
      value: vennData[4].size,
    },
    {
      sets: ["optimal"],
      value: vennData[6].size,
    },
    {
      sets: ["baseline", "optimal"],
      value: vennData[3].size,
    },
    {
      sets: ["ours", "optimal"],
      value: vennData[1].size,
    },
    {
      sets: ["ours", "baseline"],
      value: vennData[0].size,
    },
    {
      sets: ["baseline", "ours", "optimal"],
      value: vennData[2].size,
    },
  ];

  return (
    <>
      <input
        type="range"
        min="1"
        max="100"
        defaultValue={userPercent}
        onChange={(e) => setUserPercent(+e.target.value)}
      />
      {userPercent}
      <Venn
        seriesData={formattedVennData}
      />
    </>
  );
}

function Venn(props) {

  const { seriesData } = props;

  const chartOptions = {
    series: [
      {
        type: "venn",
        data: seriesData,
      },
    ],
  };

  return (
    <>
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
        // key={new Date().getTime()} // if used, forces component to be loaded from scratch
      />
    </>
  );
}

上面的代码按我预期的那样工作，除了在滑块中的某些看似随机的点，我得到了一个控制台错误，我无法找出是什么导致了它。

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.draw (venn.src.js:601:21)
    at venn.src.js:1752:21
    at Array.forEach (<anonymous>)
    at b2.drawPoints (venn.src.js:1742:17)
    at a2.render (highcharts.src.js:38426:21)
    at a2.redraw (highcharts.src.js:38476:17)
    at highcharts.src.js:30979:25
    at Array.forEach (<anonymous>)
    at a2.redraw (highcharts.src.js:30977:17)

The above error occurred in the <ForwardRef> component:

    at http://localhost:5173/node_modules/.vite/deps/highcharts-react-official.js?v=5fa2073c:86:36
    at Venn (http://localhost:5173/src/App.tsx?t=1681816117656:287:13)
    at App (http://localhost:5173/src/App.tsx?t=1681816117656:26:43)

我知道这不是数据的问题，因为如果我将key={new Date().getTime()}添加到HighchartsReact组件中，那么每次都从头开始加载，每个维恩图都可以正常加载。但是，如果我这样做，我就会失去维恩图之间的平滑动画，这就是可视化的全部意义。
有谁知道为什么会出错吗？