Timeline Component(New) rendering multiple events per row not ordering properly

I am using the timeline component to try and visualize a flight schedule. The schedule is grouped by the aircraft. The issue that I am encountering is that the timeline does not seem to be honoring the order of the events unless you render one event per row. In my case rendering one event per row results in a lot of wasted space due to the amount of events per grouping.

Iv attempting ordering the dates manually, using moment to wrap the dates but the actual data is sound and renders properly if I dont allow the events to stack, which is what I am hoping to accomplish.

All of my times are in UTC so this is specifically not a timezone issue, although i would love to be able to add the option to visualize the data in different timezones but am not currently confident in the ordering of the component.

Here is an example:

This is the timeline without the "one event per row option" selected

This is the same grouping but with the toggle on:

You can see that after that option is selected the events line up as they should but it takes up way more space. Iv made the title of the events the start date of the event to more easily visualize.

Would really appreciate some help understanding what the issue might be.

Thanks!

Hi @Sebastian_Florez Thanks for reaching out! :wave: I'm seeing the same issue :thinking:. I'll flag this to our team for a fix!