크롬 토글디바이스툴바에서만 생기는 문제점이요 ㅠ useEffect

 useEffect(() => {
    const updateItemsPerRow = () => {
      if (window.innerWidth <= 500) {
        setItemsPerRow(1); 
      } else if (window.innerWidth > 500 && window.innerWidth <= 1024) {
        setItemsPerRow(2); 
      } else if (window.innerWidth > 1023 && window.innerWidth <= 1440) {
        setItemsPerRow(3); 
      } else {
        setItemsPerRow(5); 
      }
    };

    updateItemsPerRow();
    window.addEventListener("resize", updateItemsPerRow);

    return () => window.removeEventListener("resize", updateItemsPerRow);
  }, []);

코드를 이렇게 잡고 반응형으로 해서 페이지가 줄어들었을때 나와있는 아이템 갯수를 줄이려고 하는건데 1440 미만은 3개로 잘 보이고 1024미만도 2개로 잘보이는데 500 미만으로 가면 크롬 토글디바이스 툴바로 해서 iPhone12로 했을때 처음에는 잘 적용이 되다가 iPad 눌러서 1024 한번 보고 다시 iPhone12를 누르면 적용이 안되고 아이템이 2개로 고정되어있습니다. 페이지를 제가 직접 마우스로 줄이고 늘리고 했을땐 잘 적용이 되는데요 코드가 문제일까요 아님 크롬이 문제일까요 ? 물론 제 코드가 문제라고 생각하는데 도저히 원인을 모르게서 여쭤봐요 고수님들 ㅠㅠ