Как сделать в react-big-calendar разную ширину для событий, которые перекрывают друг друга

Всем привет! Мне нужно сделать так, что если два события перекрывают друг друга по времени, второе событие будет иметь ширину 65%. Как я могу это сделать?

Вот скрин что есть сейчас:

Это мой компонент календаря:

  <DnDCalendar
    formats={calendarFormats}
    components={calendarComponents}
    toolbar={false}
    defaultView="week"
    events={events}
    localizer={localizer}
    onEventDrop={onEventDrop}
    onEventResize={onEventResize}
    resizable
    selectable
    onSelectEvent={onSelectEvent}
    onSelectSlot={onSelectSlot}
    step={15}
    timeslots={4}
    style={{ height: 'calc(100vh - 80px)', width: '100%' }}
  />

  const DnDCalendar = withDragAndDrop(Calendar)

Что я пытался сделать:

const eventPropGetter = React.useCallback(
    (event, start, end, isSelected) => ({
      ...(events.filter(e => e.start < end && e.end > start && e !== event).length > 0 && {
        style: {
          width: '65%'
        }
      })
    }),
    []
  )
    <DnDCalendar
        formats={calendarFormats}
        components={calendarComponents}
        toolbar={false}
        defaultView="week"
        events={events}
        localizer={localizer}
        onEventDrop={onEventDrop}
        onEventResize={onEventResize}
        eventPropGetter={eventPropGetter}
        resizable
        selectable
        onSelectEvent={onSelectEvent}
        onSelectSlot={onSelectSlot}
        step={15}
        timeslots={4}
        style={{ height: 'calc(100vh - 80px)', width: '100%' }}
      />
   const DnDCalendar = withDragAndDrop(Calendar)