我有一个slider组件，用户可以在其中设置ImageGallery组件中的列数。
这是我的滑块组件

export default function Slider({ value, handleChange }: ISlider) {
  return (
    <input
      className={styles.slider}
      min={1}
      max={3}
      step={1}
      type="range"
      value={value}
      onInput={handleChange}
      onChange={handleChange}
    />
  );
}

const handleChange = (event: any) => {
  setValue(event.target.value);
};

我正在尝试将slider中的值存储在会话存储中，以便保存用户首选项，并使用useState函数进行设置。

export default function ImageGallery({
  projects,
}: {
  projects: any;
}): JSX.Element {
  const [value, setValue] = useState(null);

  const handleChange = (event: any) => {
    setValue(event.target.value);
  };

  useEffect(() => {
    if (typeof window !== "undefined") {
      window.sessionStorage.setItem("value", JSON.stringify(value));
    }
  }, [value]);

  useEffect(() => {
    const storedValue: string | null = window.sessionStorage.getItem("value");
    const valueData = storedValue ? JSON.parse(storedValue) : 1;
    setValue(valueData);
  }, []);

  const breakpointColumnsObj = {
    default: 4,
    1100: 3,
    700: 2,
    500: value
  };

  return (
    <>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className={styles.myMasonryGrid}
        columnClassName={styles.myMasonryGridColumn}
      >
        {projects.map((item: any) => {
          const images = item.images.data.attributes.formats.large;
          return (
            <ImageCard
              key={item.slug}
              src={images.url}
              alt={item.images.data.attributes.caption}
              width={images.width}
              height={images.height}
              slug={item.slug}
              id={item.slug}
            />
          );
        })}
      </Masonry>
      <Slider value={value} handleChange={handleChange} />
    </>
  );
}

然后在我的主页（静态页面）中呈现ImageGallery组件。
存储数据工作正常。我面临的问题是，每当我回到主页，它设置为空值，无论什么是存储在会话存储（它覆盖会话存储）。有人能帮我解决这个问题吗？