Не вызывается событие resize во время css анимации

Всем привет. Пишу приложение на react и столкнулся с проблемой. Есть элемент с анимацией изменения ширины. Я хочу подписаться на это изменение и вызывать определенный callback. Но, почему-то, анимация не вызывает мой callback, хотя offsetWidth меняется с 305 до 694(calc(100% - 126px))

На фото(сверху) первое состояние элемента. Далее происходит его заполнение элементами вместе с анимацией.

Если посмотреть все слушатели событий на элементе, то там будет тот, что нам нужен, но он не отрабатывает.

Стили данного элемента:

const getContainerStyles = (showSlider: boolean): SxProps<Theme> => ({
  position: "absolute",
  bottom: 30,
  width: showSlider ? "calc(100% - 126px)" : "305px",
  transition: "width 0.8s cubic-bezier(0.33, 1, 0.68, 1)",
  MozTransition: "width 0.8s cubic-bezier(0.33, 1, 0.68, 1)",
  display: "flex",
  justifyContent: "flex-end",
});

Установка слушателя:

export const changeSpotlightByChangingTargetElement = (
  target: OnboardingSelector,
  eventType: string,
  prefix?: Prefix
): EffectCallback => () => {
  const targetElement = document.querySelector(getTargetSelector(target, prefix));
  const spotlightElement = getSpotlightElement();

  return addEventListenerToTargetElement(
    targetElement!,
    () => dispatchSpotlightEvent(eventType, spotlightElement),
    eventType
  )();
};



export const addEventListenerToTargetElement = (
  target: OnboardingSelector | Element,
  eventListener: () => void,
  eventType: string = "click",
): EffectCallback => () => {
  const element = typeof target === "string" ? document.querySelector(target) : target;
  element?.addEventListener(eventType, eventListener);
  return () => element?.removeEventListener(eventType, eventListener);
};