Как исправить зависимость от ref в react-intersection-observer?

Question

[lexstile]

Библиотека.

Проблема в том, что, когда загружается компонент, данных еще нет и кнопка не отображается до тех пор, пока данные не загрузятся - это провоцирует еще один вызов на BE - итого два вызова вместо одного.

Как временное решение - добавил пустой безусловный div в код и прокинул ref туда.

Но как можно обойти данный костыль?

const { ref, inView } = useInView();

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

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

// Костыль
<div ref={ref}></div>