Как вызвать прослушиватель события load в useEffect при каждом повторном рендеринге компонента?

Question

Я пытаюсь преобразовать какой-то сайт c html / css, чтобы он реагировал. js. В теге script есть эта функция, которая применяет некоторый переход css, когда окно загружается каждый раз. Вот функция ниже:

window.addEventListener('load', function() {
   document.querySelectorAll('.progress-custom-bar-fill').forEach(e => {
      e.style.width = `${e.getAttribute('fill-progress')}%`;
      })
})

        <div
          className={`progress-custom-bar-fill ${goodOrOk}`}
          fill-progress={progress}
        />

Я попытался применить свойство стиля напрямую к div следующим образом:

         <div
          style={{ width: `${progress}%` }}
          className={`progress-custom-bar-fill ${goodOrOk}`}
          fill-progress={progress}
        />

Это сработало, но не применимо css transitionon

Я пытался использовать Effect, он работает только в первый раз, когда загружается окно, но при переключении между страницами он не работает. Вот что я пытался:

useEffect(() => {
    function updateProgressBar() {
      document.querySelectorAll('.progress-custom-bar-fill').forEach((e) => {
        e.style.width = `${e.getAttribute('fill-progress')}%`;
      });
    }
    window.addEventListener('load', updateProgressBar);
    return () => window.removeEventListener('load', updateProgressBar);
  });

Как использовать useEffect для повторного рендеринга при событии загрузки? Или есть другое решение для этого? Заранее спасибо