I am calling data from firestore and paginating them. This is my query:

const tradesRef = firebase
    .firestore()
    .collection("trades")
    .orderBy("quoteQty", "desc")
    .where("quoteQty", ">", 5000)
    .limit(12);

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);
  }, []);

I am using this function to get the next 12 trades:

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(tradesData);
        setLastTrades(lastDoc);
      });
  };

I am trying to give a previous page option but can not figure out how to go to the previous page. So far I have tried this which does not work:

const fetchPrevious = () => {
    tradesRef
      .endBefore(lastIndex)
      .limitToLast(12)
      .get()
      .then((collections) => {
        const tradesData = collections.docs.map((trade) => trade.data());
        const lastDoc = collections.docs[collections.docs.length - 1];
        setTrades(tradesData);
        setLastTrades(lastDoc);
      });
  };

Any suggestions on how can I make the previous button work?