title: event listener resize window not working on first expand only
body: <p>I'm trying to make the side buttons in the carousel(3rd slide) change based on the inner slide container size resizing with media query. I've got it working except for one bug. When I resize back from smaller responsive, the button doesn't change, until I resize again (smaller or bigger but on the same media query)</p>
  <ul>
  <li>Site to reproduce error: <a href="https://9wk9h.csb.app/" rel="nofollow noreferrer">https://9wk9h.csb.app/</a></li>
  <li>The Full Code: <a href="https://codesandbox.io/s/my-portfolio-2021-9wk9h" rel="nofollow noreferrer">https://codesandbox.io/s/my-portfolio-2021-9wk9h</a></li>
  </ul>
  <p>This is the block of code used in the file src/Components/AboutComponents/AboutCarousel.js:</p>
  <pre><code>  useLayoutEffect(() =&gt; {
      if (slideIndex === slideIndexes.fun) {
        const handleResize = debounce(() =&gt; {
          setIsScreenResized(!isScreenResized);
          console.log('isScreenResized changed =', isScreenResized);
          console.log('---------------------')
        }, 100);
  
        window.addEventListener('resize', handleResize, false);
  
        return () =&gt; {
          window.removeEventListener('resize', handleResize, false);
        }
      }
    },[slideIndex, slideIndexes, hobbyTabIdSelected, isScreenResized, setIsScreenResized]);
  </code></pre>
  <p>See the following use case below to reproduce the issue:</p>
  <p><a href="https://i.stack.imgur.com/kbpjt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kbpjt.jpg" alt="enter image description here" /></a></p>