为什么ReCharts绘制3次条形图？

Question

ReCharts在条形图中绘制3次条形时遇到问题。

为什么会发生这种情况，专家对此有什么特别的认识？

非常感谢您提供的任何帮助。

相关代码：

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts';
import { GanttProps } from '../../models/Gantt';

const Gantt = ({ data, minX, maxX }: GanttProps): JSX.Element => {

  const data3 = [
    {
      color: 'green',
      x0: 1602833700,
      x1: 1603427700,
      y: 'status'
    },
    {
      color: 'yellow',
      x0: 1603427700,
      x1: 1604427700,
      y: 'status'
    },
    {
      color: 'red',
      x0: 1604427700,
      x1: 1605427700,
      y: 'status'
    }
  ];

  const getDuration = (data) => {
    return data.x1 - data.x0;
  };

  const getDivider = () => {
    // return (maxX - minX) * 0.01;
    return maxX - minX;
  };

  const getBars = (data) => {
    const bars = [];
    data3.forEach((object, index, array) => {
      bars.push(<Bar dataKey={getDuration} stackId="a" fill={object.color} radius={2} key={`data.${index}`} />);

      if (array.length > index + 1) {
        console.log('making dividers');
        bars.push(<Bar dataKey={getDivider} stackId="a" fill="blue" radius={2} key={`divider.${index}`} />);
      }
    });
    console.log(bars);
    return bars;
  };

  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart data={data3} layout="vertical" margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
        <XAxis type="number" hide={true} />
        <YAxis type="category" hide={true} domain={[minX, maxX]} />
        {getBars(data)}
      </BarChart>
    </ResponsiveContainer>
  );
};

export default Gantt;

截屏：