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

[PieterT2000]

Same issue here. Is there an option for each item to be rendered on its own row, regardless of time overlap with other items in the group?