This is straight from the Area Chart examples, with just one modification. Using custom data instead of the randomized one used in the example.

But running this throws an error: serie.data.some is not a function.

Can you please help me find the issue here.

export default function Bar() {
  const { data, randomizeData } = useDemoConfig({
    series: 10,
    dataType: "time",
  });
  // the first data variable destructed from the hook is working, whereas creating new data variable with the same structure is not working
  const data = [
    {
      label: "Maths Level 2 Course",
      data: {
        primary: "2024-02-10",
        secondary: 4,
        radius: null,
      },
    },
    {
      label: "Maths Level 2 Course",
      data: {
        primary: "2024-02-10",
        secondary: 1,
        radius: null,
      },
    }
  ];

  const primaryAxis = React.useMemo<
    AxisOptions<(typeof data)[number]["data"][number]>
  >(
    () => ({
      getValue: (datum) => datum.primary as Date,
    }),
    []
  );

  const secondaryAxes = React.useMemo<
    AxisOptions<(typeof data)[number]["data"][number]>[]
  >(
    () => [
      {
        getValue: (datum) => datum.secondary,
        stacked: true,
        // OR
        // elementType: "area",
      },
    ],
    []
  );

  return (
    <>
      <button onClick={randomizeData}>Randomize Data</button>
      <br />
      <br />
      <ResizableBox>
        <Chart
          options={{
            data,
            primaryAxis,
            secondaryAxes,
          }}
        />
      </ResizableBox>
    </>
  );
}

I am going to be fetching this data from an API and load it dynamically. But even static data is not working.