Scroll on bottom (React<TS>)

useScrollBottom.ts

import { useRef, useEffect, useState, useCallback } from 'react';

interface ReturnDataI {
  ref: React.MutableRefObject<Element | null>;
  isBottom: boolean;
}

export function useScrollBottom(offset = 0): ReturnDataI {
  const ref = useRef<Element>(null);
  const [isBottom, setIsBottom] = useState<boolean>(false);

  const onScroll = useCallback(() => {
    if (ref && ref.current) {
      setIsBottom(
        ref.current.getBoundingClientRect().bottom <=
          window.innerHeight + offset
      );
    }
  }, []);

  useEffect(() => {
    document.addEventListener('scroll', onScroll);
    return () => {
      document.removeEventListener('scroll', onScroll);
    };
  }, []);

  return {
    ref,
    isBottom
  };
}