Функциональный компонент рендерит дважды только после развертывания

Question

У меня есть функциональный компонент, который визуализирует Slider в зависимости от ширины окна:

const Works = (props) => {
  const size = useWindowWidth()
  const codeWorksArray = CodeWorksQuery()
  const mapWorksArray = MapWorksMetadata()

  const setSliderItems = (width) => {
    if (width > config.deviceWidths.medium) {
      return 4
    } else if (width >= config.deviceWidths.small) {
      return 2
    } else {
      return 1
    }
  }
...

<Slider sliderElements={mapWorksSliderItems} slidesCount={setSliderItems(size.width)}/>

useWindowWidth() - это хук, который получает размеры окна и обрабатывает слушателя изменения размера:

import { useState, useEffect } from "react"

const useWindowWidth = () => {
  const isWindowAvailable = typeof window !== "undefined"

  const getSize = () => {
    return {
      width: isWindowAvailable ? window.innerWidth : undefined,
      height: isWindowAvailable ? window.innerHeight : undefined
    };
  }

  const [windowSize, setWindowSize] = useState(getSize)

  useEffect(() => {
    if (!isWindowAvailable) {
      return false
    }

    const handleResize = () => {
      setWindowSize(getSize())
    }

    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return windowSize
}

export default useWindowWidth

* Значение 1008 * передается как значение Slider, и вычисляется ширина каждого элемента ползунка внутри компонента. Проблема в том, что один раз развернутый слайдер имеет только один элемент (вместо 4 на рабочем столе). Кажется, что обновление только после изменения размера.

На localhost это работает нормально. После развертывания (Netlify) этот компонент визуализируется дважды, но после второго рендеринга он сохраняет информацию от первого рендеринга. Что вызывает разницу во внешнем виде на локальном хосте и после развертывания?