React Pagination with Firebase FireStore - (Prev / Next Pagination)

PaginateApp.js

import React, { useState, useEffect } from 'react';
// I'm using react-bootstrap for UI elements
import { Table, Button, ButtonGroup } from 'react-bootstrap';
// Firebase config
import { getFirestore, collection, query, orderBy, limit, startAfter, endBefore, onSnapshot } from 'firebase/firestore';
import { getApp } from 'firebase/app';

export default function App() {
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);

  const db = getFirestore(getApp());

  useEffect(() => {
    const fetchData = async () => {
      const q = query(collection(db, 'users'), orderBy('created', 'desc'), limit(5));
      const unsubscribe = onSnapshot(q, (querySnapshot) => {
        const items = [];
        querySnapshot.forEach((doc) => {
          items.push({ key: doc.id, ...doc.data() });
        });
        console.log('first item ', items[0]);
        setList(items);
      });

      return () => unsubscribe();
    };
    fetchData();
  }, [db]);

  const showNext = async ({ item }) => {
    if (list.length === 0) {
      alert("That's all we have for now!");
    } else {
      const fetchNextData = async () => {
        const q = query(
          collection(db, 'users'),
          orderBy('created', 'desc'),
          startAfter(item.created),
          limit(5)
        );
        const unsubscribe = onSnapshot(q, (querySnapshot) => {
          const items = [];
          querySnapshot.forEach((doc) => {
            items.push({ key: doc.id, ...doc.data() });
          });
          setList(items);
          setPage(page + 1);
        });

        return () => unsubscribe();
      };
      fetchNextData();
    }
  };

  const showPrevious = async ({ item }) => {
    const fetchPreviousData = async () => {
      const q = query(
        collection(db, 'users'),
        orderBy('created', 'desc'),
        endBefore(item.created),
        limit(5)
      );
      const unsubscribe = onSnapshot(q, (querySnapshot) => {
        const items = [];
        querySnapshot.forEach((doc) => {
          items.push({ key: doc.id, ...doc.data() });
        });
        setList(items);
        setPage(page - 1);
      });

      return () => unsubscribe();
    };
    fetchPreviousData();
  };

  return (
    <>
      <Table>
        <tbody>
          {list.map((doc) => (
            <tr key={doc.key}>
              <td>{doc.name}</td>
              <td>{doc.age}</td>
              <td>{doc.note}</td>
            </tr>
          ))}
        </tbody>
      </Table>
      <ButtonGroup>
        {page === 1 ? '' : <Button onClick={() => showPrevious({ item: list[0] })}>Previous</Button>}
        {list.length < 5 ? '' : <Button onClick={() => showNext({ item: list[list.length - 1] })}>Next</Button>}
      </ButtonGroup>
    </>
  );
}