consumer.tsx

import * as React from "react";

export const DisplayProductsComponent = () =>< {
  const {createScrollObserver, converge, setConverge} = useIntersectionObserver();
  const [product, setProduct] = React.useState<ProductDef>(undefined);
  const loadMoreRef = React.useRef<HTMLDivElement>(null);
  let scrollObserver = createScrollObserver();
    
  React.useEffect(() => {
    // other conditions/cases
    if(loadMoreRef?.current) {
      scrollObserver.observe(loadMoreRef.current);
     }
  }, [product])
    
  React.useEffect(() => {
    if(converge && whateverOtherCondition){
      loadMoreFunc();
      // Return converge back to it's original state, so that we can be notified when there is another convergence
      // as the user scrolls after more content has been loaded
      setConverge(false);
    }
  }, [converge]);
  
  function loadMore(){
    fetch(...);
  }
  
  return (
      <>
      ...
        <div ref={loadMoreRef}></div>
      </>
  )
}