const [scrollStatus, setScrollStatus] = useState({
    scrollDirection: null,
    scrollPos: 0
  });

  useEffect(() => {
    if (innerRef.current) {
      innerRef.current.addEventListener("scroll", handleScrollDocument);
    }

    return () =>
      innerRef?.current.removeEventListener("scroll", handleScrollDocument);
  }, []);

  function handleScrollDocument() {
    if (!innerRef?.current) return;
    setScrollStatus((prev) => {
      // to get 'previous' value of state
      return {
        scrollDirection:
          innerRef.current.scrollTop > prev.scrollPos ? "down" : "up",
        scrollPos: innerRef.current.scrollTop
      };
    });
  }