Как корректно использовать react intersection observer?

Question

[lexstile]

react intersection observer
Когда контента больше, чем область просмотра, все работает корректно.
Но когда меньше, вызывается метод получения следующей страницы, что не нужно.
Как можно обойти проблему?

Хотелось бы, чтобы при инициализации компонента метод fetchNextPage не вызывался, но как такого поведения добиться, не совсем ясно.
Пробовал через ref, но они работают только до тех пор, пока компонент не размонтирован.
Если компонент размонтируется, метод fetchNextPage снова вызывается.

const { ref, inView } = useInView();

  useEffect(() => {
    if (inView) {
      fetchNextPage();
    }
  }, [inView]);

{hasNextPage && (
  <Button ref={ref} onClick={fetchNextPage} disabled={isFetchingNextPage}>
    {isFetchingNextPage ? 'Загрузка...' : hasNextPage ? 'Загрузить еще...' : ''}
  </Button>
)}

<div ref={ref}></div>