Can't use my component in another component

ı am trying to use my component in VictoryChart component but it gives me "TypeError: Array.from requires an array-like object - not null or undefined"

It is working fine without separate component ı hope you can help

VictoryBlock.js

function VictoryBlock({ data, fill, stroke }) {
  return (
    <>
      <VictoryArea
        data={data}
        interpolation="natural"
        style={{
          data: {
            fill: fill,
            fillOpacity: 0.7,
            stroke: stroke,
            strokeWidth: 2,
          },
        }}
      />
      <VictoryScatter
        style={{ data: { fill: stroke } }}
        size={5}
        labels={({ datum }) => datum.y} //check this
        labelComponent={<VictoryTooltip renderInPortal={false} />} //check this
        data={data}
      />
    </>
  );
}

export default VictoryBlock;

VictoryDemo.js (working without separate component)

function VictoryDemo({ firstData, secondData, thirdData }) {
  return (
    <VictoryChart
      animate={{ easing: "elastic", duration: 2000 }} // gives performance problem
      theme={VictoryTheme.material}
      /*    containerComponent={
        <VictoryZoomContainer zoomDomain={{ x: [0, 6], y: [0, 15] }} /> // gives performance problem
      } */
    >
      <VictoryArea
        data={firstData}
        interpolation="natural"
        style={{
          data: {
            fill: "#CACACA",
            fillOpacity: 0.7,
            stroke: "black",
            strokeWidth: 2,
          },
        }}
      />
      <VictoryScatter
        style={{ data: { fill: "black" } }}
        size={5}
        labels={({ datum }) => datum.y} //check this
        labelComponent={<VictoryTooltip renderInPortal={false} />} //check this
        data={firstData}
      />
      <VictoryArea
        data={secondData}
        interpolation="natural"
        style={{
          data: {
            fill: "#A2A2A2",
            fillOpacity: 0.7,
            stroke: "black",
            strokeWidth: 2,
          },
        }}
      />
      <VictoryScatter
        style={{ data: { fill: "black" } }}
        size={5}
        labels={({ datum }) => datum.y} //check this
        labelComponent={<VictoryTooltip renderInPortal={false} />} //check this
        data={secondData}
      />
      <VictoryArea
        data={thirdData}
        interpolation="natural"
        style={{
          data: {
            fill: "#6F6D6D",
            fillOpacity: 0.7,
            stroke: "black",
            strokeWidth: 2,
          },
        }}
      />
      <VictoryScatter
        style={{ data: { fill: "black" } }}
        size={5}
        labels={({ datum }) => datum.y} //check this
        labelComponent={<VictoryTooltip renderInPortal={false} />} //check this
        data={thirdData}
      />
    </VictoryChart>
  );
}

export default VictoryDemo;

VictoryDemo.js (not working with separate component)

function VictoryDemo({ firstData, secondData, thirdData }) {
  return (
    <VictoryChart
      animate={{ easing: "elastic", duration: 2000 }} // gives performance problem
      theme={VictoryTheme.material}
      /*    containerComponent={
        <VictoryZoomContainer zoomDomain={{ x: [0, 6], y: [0, 15] }} /> // gives performance problem
      } */
    >
      <VictoryBlock data={firstData} fill="#CACACA" stroke="black" />
      <VictoryBlock data={secondData} fill="#A2A2A2" stroke="black" />
      <VictoryBlock data={thirdData} fill="#6F6D6D" stroke="black" />
    </VictoryChart>
  );
}

export default VictoryDemo;