Stacking only enforced when times overlap

[karlrez]

Describe the bug Using param stackItems={true} I am finding the stacking only occurs where there would be overlap in times, otherwise the same row is shared

To Reproduce Code Sandbox

Data:

    {
      id: 1,
      title: "Workers",
      color: "purple"
    }
  ];

  const items = [
    {
      id: 1,
      group: 1,
      title: "team1",
      tip: "custom tip",
      start_time: 1695840363319.992,
      end_time: 1695845741319.996,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "green",
          color: "black",
          textAlign: "center"
        }
      }
    },
    {
      id: 2,
      group: 1,
      title: "team1",
      tip: "custom tip",
      start_time: 1695850355319.972,
      end_time: 1695850360319.976,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "green",
          color: "black",
          textAlign: "center"
        }
      }
    },
    {
      id: 3,
      group: 1,
      title: "team1",
      tip: "custom tip",
      start_time: 1695852660319.98,
      end_time: 1695854210319.996,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "green",
          color: "black",
          textAlign: "center"
        }
      }
    },
    {
      id: 4,
      group: 1,
      title: "TEAM5",
      tip: "custom tip",
      start_time: 1695827220319,
      end_time: 1695837600000,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "red",
          color: "black",
          textAlign: "center"
        }
      }
    },
    {
      id: 5,
      group: 1,
      title: "TEAM6",
      tip: "custom tip",
      start_time: 1695852660319.98,
      end_time: 1695854210319.996,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "orange",
          color: "black",
          textAlign: "center"
        }
      }
    }
  ];

Timeline:

<Timeline
      groups={groups}
      items={items}
      defaultTimeStart={new Date(items[0].start_time)}
      defaultTimeEnd={new Date(items[items.length - 1].end_time)}
      stackItems={true}
      // onTimeChange={onTimeChange}
    >
      <TimelineHeaders style={{ background: "Grey" }}>
        <SidebarHeader>
          {({ getRootProps }) => {
            return (
              <div {...getRootProps()}>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    height: "60px",
                    color: "white"
                  }}
                >
                  Groups
                </div>
              </div>
            );
          }}
        </SidebarHeader>
        <DateHeader unit="primaryHeader" />
        <DateHeader />
      </TimelineHeaders>
    </Timeline>`

Expected behavior Have stacking enforced even when times do not overlap

Screenshots

Library Version Please provide version of library in which this bug is occurring. 0.28.0

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome, edge
• Version: latest