How to maintain and restore the scroll position using sessionStorage in React.js?

I geted horizontal scroll position using "querySelector" and I try useEffect.. but not working.

How do I solve this problem?

/

Here's my code

export const TopNavigation = () => {
  const [selected, setSelected] = React.useState<string>("");

  const scrollX = document.querySelector(
    ".react-horizontal-scrolling-menu--scroll-container "
  )?.scrollLeft;
  console.log(scrollX);

    useEffect(() => {
      sessionStorage.setItem("scrollX", JSON.stringify(xPosition));
    }, []);
    
    useEffect(() => {
      if (selected === window.location.pathname) {
        sessionStorage.getItem("scrollX");
      }
    }, []);

  const handleItemClick =
    (itemId: string) =>
    ({ getItemById, scrollToItem }: scrollVisibilityApiType) => {
      setSelected(selected !== itemId ? itemId : "");
      scrollToItem(getItemById(itemId), "smooth", "center", "nearest");
    };

  return (
    <div id="TopNavigation">
      <ScrollMenu
        onMouseUp={({
            getItemById,
            scrollToItem,
            visibleItems,
          }: scrollVisibilityApiType) =>
          () => {
            const { center } = getItemsPos(visibleItems);
            scrollToItem(getItemById(center), "smooth", "center");
          }}
        options={{ throttle: 0 }} 
      >
        {TOP_NAV_PATH_LIST.map((arr, idx) => (
          <Menu
            title={arr.name}
            itemId={arr.name}
            path={arr.path}
            key={idx}
            onClick={handleItemClick(arr.name)}
            selected={arr.path === selected}
          />
        ))}
      </ScrollMenu>
    </div>