since days I’m struggling with nested map function.
I want to draw horizontal bars with a start and end date in a timeline.
all bars should be displayed stacked. This works as long as I’m not having nested data objects.
With nested data object, all bars a rendered in the same row instead of one underneath the other.
But I need to have an data like this:

const bars = [
  {
    title: "June 24",
    bookings: [
      {
        Beginn_Datum: "2024-06-05T22:00:00.000Z",
        Ende_Datum: "2024-06-08T22:00:00.000Z",
      },
      {
        Beginn_Datum: "2024-06-05T22:00:00.000Z",
        Ende_Datum: "2024-06-08T22:00:00.000Z",
      },
    ],
  },
];

This is the code, where all bars are generated:

<div className="bar-chart">
        {bars.map((category, index) =>
          category.bookings.map((bar, idx) => {
            const { startPosition, width } = calculatePercentage(
              new Date(bar.Beginn_Datum),
              new Date(bar.Ende_Datum),
              minDate,
              maxDate,
              scale
            );
            return (
              <Bar
                key={`${index}-${idx}`} // Verwenden Sie eine eindeutige Kombination aus index und idx für den key
                startPosition={startPosition}
                width={width}
                index={index}
                label={bar.Beginn_Datum}
              />
            );
          })
        )}
      </div>

I was trying to wrap the bars, but it doesn’t work either:

<div className="bar-chart">
        {bars.map((category, index) => {
          return (
            <div className="bar-wrapper">
              {category.bookings.map((bar, idx) => {
                const { startPosition, width } = calculatePercentage(
                  new Date(bar.Beginn_Datum),
                  new Date(bar.Ende_Datum),
                  minDate,
                  maxDate,
                  scale
                );
                return (
                  <Bar
                    key={`${index}-${idx}`} // Verwenden Sie eine eindeutige Kombination aus index und idx für den key
                    startPosition={startPosition}
                    width={width}
                    index={index}
                    label={bar.Beginn_Datum}
                  />
                );
              })}
            </div>
          );
        })}
      </div>

.bar-chart {
  position: relative;
  height: 300px;
  display: flex; /* oder grid */
  flex-direction: column; /* oder grid-template-columns: 1fr */
  z-index: 2; /* Place it in front of the background columns */
}

.bar-wrapper {
  position: relative;
  height: 300px;
  display: flex; /* oder grid */
  flex-direction: column; /* oder grid-template-columns: 1fr */
}