I am fetching crypto trades data from my collection in firestore. On clicking the load more button, I am successfully loading more data hence the query is not the issue here. I want to run the function when the user scrolls to the bottom. Here is my query:

const tradesRef = firebase
    .firestore()
    .collection("cex-trades")
    .orderBy("time", "desc")
    .limit(16);

Here is the initial data loading when the component is mounted:

 useEffect(() => {
    tradesRef.get().then((collections) => {
      const tradesData = collections.docs.map((trade) => trade.data());
      const lastDoc = collections.docs[collections.docs.length - 1];
      setTrades(tradesData);
      setLastTrades(lastDoc);
    });
    setDataLoading(false);
  }, []);

When the page loads, the first 16 trades are loaded on the screen. I have a Fetch More button which loads the next 16 trades and so on. The fetch more function:

const fetchMore = () => {
    tradesRef
      .startAfter(lastTrades)
      .get()
      .then((collections) => {
        const tradesData = collections.docs.map((trade) => trade.data());
        const lastDoc = collections.docs[collections.docs.length - 1];
        setTrades((listOfTrades) => [...listOfTrades, ...trades]);
        setLastTrades(lastDoc);
      });
  };

I do not want to make the users click the button to load the next trades. The next trades should be loaded when the user reaches the end of the page by scrolling. How can I achieve this through React?