React big calender Stylowanie eventów poprzez "left"

Question

Chiałbym zmienić wartość left tak aby te eventy były jeden pod drugim (czerwony pod niebieskim) ale nie mogę tego zrobić, mam wrażenie że cały czas coś mi nadpisuje wartość którą przekazuje.

const customEventPropGetter = (event) => {
    const isMissed = event.isMissed; // Przyjmij, że pole isRedEvent oznacza, czy event ma być czerwony
    const index = event.index;
    const left = `${index * 20}% !important`;
    console.log(left);
    const style = {
      left: left,
      color: "black",
    };
    console.log(style);
    return {
      className: isMissed ? "missed-ECP event " : "event", // Dodaj klasę tylko dla czerwonych eventów
      style,
    };
  };

  const eventStyleGetter = (event, start, end, isSelected) => {
    // Dodaj styl `left` na 20% tylko dla konkretnego wydarzenia
    const index = event.index;
    const left = `${index * 20}% !important`;
    return {
      style: {
        left: left,
      },
    };
  };

  useEffect(() => {
    console.log(props.user);
    console.log(props.date);
    fetchData(props.user.PrzelozonyRola, props.date).then((allPracownicy) => {
      var ECP = [];

      for (var i = 0; i < allPracownicy.length; i++) {
        const [startHours, startMinutes] =
          allPracownicy[i].Od_godz.split(":").map(Number);
        const [endHours, endMinutes] =
          allPracownicy[i].Do_godz.split(":").map(Number);

        const start = new Date(allPracownicy[i].Data);
        start.setHours(startHours);
        start.setMinutes(startMinutes);
        const end = new Date(allPracownicy[i].Data);
        end.setHours(endHours);
        end.setMinutes(endMinutes);

        const pracownik = {
          start: start,
          end: end,
          title: allPracownicy[i].Imie + " " + allPracownicy[i].Nazwisko,
          index: i,
        };
        console.log(i);
        ECP.push(pracownik);

        const missedHours = 8 - allPracownicy[i].IloscGodzin;
        if (missedHours > 0) {
          const missedStart = new Date(allPracownicy[i].Data);
          missedStart.setHours(endHours);
          missedStart.setMinutes(endMinutes);
          const missedEnd = new Date(allPracownicy[i].Data);
          missedEnd.setHours(endHours + missedHours);
          missedEnd.setMinutes(endMinutes);

          const pracownik_missed = {
            start: missedStart,
            end: missedEnd,
            title:
              "Nieobecność - " +
              allPracownicy[i].Imie +
              " " +
              allPracownicy[i].Nazwisko +
              " powód: " +
              allPracownicy[i].Powod,
            isMissed: true,
            index: i,
          };
          ECP.push(pracownik_missed);
        }
      }

      setUrlopy(ECP);
    });
  }, []);
  console.log("Eventy");
  console.log(urlopy);
  return (
    <Calendar
      className="kalendarz"
      localizer={localizer}
      events={urlopy}
      startAccessor="start"
      endAccessor="end"
      eventPropGetter={customEventPropGetter}
      eventStyleGetter={eventStyleGetter}
    />
  );
};

export default MyCalender;

enter image description here

Próbowałem to zrobić poprzez: eventPropGetter i eventStyleGetter. Macie jakieś pomysły? ps dopiero uczę się reacta :)