How to Paginate Firestore v9

Question

I'm trying to paginate my Firestore data, but I am struggling to get it to work. I tried using the startAfter function, but it will not load the next set of data. Any help would be appreciated.

import { useParams,Link , useLocation} from "react-router-dom";
import { getFirestore, onSnapshot, collection, orderBy, limit, query, startAfter, limitToLast, startAt } from "firebase/firestore"
import { useEffect, useState } from "react";
import './App.css';
import {app} from './Firebase';
import Output from 'editorjs-react-renderer';
import { getAuth } from 'firebase/auth';
import { useAuthState } from 'react-firebase-hooks/auth';
const auth = getAuth();
const db = getFirestore(app);

export default function Drive() {
    const [user, loading, error] = useAuthState(auth);
    const [journals, setJournals] = useState([]);
    const [lastvisibility, setlastvisibility] = useState('');
    const location = useLocation();
    let params = useParams();
    useEffect(() => {
        const q = query(collection(db, `${params.filetype}`, `${user.uid}`, "journals"), orderBy('lastModified', 'desc'), limitToLast(5), limit(5));
        const load = onSnapshot(q, (snapshot) => {
            console.log(snapshot.docs);
            setJournals(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})));
            setlastvisibility(snapshot.docs.length-1);
        })
    }, [location]);
    const scroll = () => {
        const q = query(collection(db, `${params.filetype}`, `${user.uid}`, "journals"), orderBy('lastModified', 'desc'), startAfter(lastvisibility), limit(5));
        const load = onSnapshot(q, (snapshot) => {
            //setJournals(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})));
            setlastvisibility(lastvisibility + snapshot.docs.length-1);
            journals.push(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})))
            console.log(lastvisibility);
            console.log(journals);
        })
    }
    var title = params.filetype.charAt(0).toUpperCase() + params.filetype.slice(1);
    return (
      <main style={{marginTop: "30px"}}>
        <h2>{title} Journals</h2>
        {journals.map((journal) => (
                    <Link to={`/edit/${params.filetype}/${journal.id}`} className='actioncard' key={journal.id} style={{ textDecoration: 'none' }}>
                        <h2 className="jounrals">{journal.name}</h2>
                        <p className='author'>{journal.author}</p>
                        <p style={{marginLeft: "10px"}}>{journal.lastModified.toDate().toDateString()}</p>
                        <div className='preview'><Output data={ journal.entry } /></div>
                     </Link>                    
                    ))}  
                     <div onClick={scroll} className='actioncard'>
                        <h2>Show More</h2>
                        <p className='author'>Click to load more files.</p>
                     </div>                    
      </main>
    );
  }

Answer 1

import { useParams,Link , useLocation} from "react-router-dom";
import { getFirestore, onSnapshot, collection, orderBy, limit, query, startAfter, limitToLast, startAt } from "firebase/firestore"
import { useEffect, useState } from "react";
import './App.css';
import {app} from './Firebase';
import Output from 'editorjs-react-renderer';
import { getAuth } from 'firebase/auth';
import { useAuthState } from 'react-firebase-hooks/auth';
const auth = getAuth();
const db = getFirestore(app);

export default function Drive() {
    const [user, loading, error] = useAuthState(auth);
    const [journals, setJournals] = useState([]);
    const [lastvisibility, setlastvisibility] = useState({});
    const location = useLocation();
    let params = useParams();
    useEffect(() => {
        const q = query(collection(db, `${params.filetype}`, `${user.uid}`, "journals"), orderBy('lastModified', 'desc'), limitToLast(5), limit(5));
        const load = onSnapshot(q, (snapshot) => {
            console.log(snapshot.docs);
            setJournals(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})));
            setlastvisibility(snapshot.docs[snapshot.docs.length-1]);
        })
    }, [location]);
    const scroll = () => {
        const q = query(collection(db, `${params.filetype}`, `${user.uid}`, "journals"), orderBy('lastModified', 'desc'), startAfter(lastvisibility), limit(5));
        const load = onSnapshot(q, (snapshot) => {
            //setJournals(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})));
            setlastvisibility(snapshot.docs[snapshot.docs.length-1]);
            setJournals(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})));
            console.log(lastvisibility);
            console.log(journals);
        })
    }
    var title = params.filetype.charAt(0).toUpperCase() + params.filetype.slice(1);
    return (
      <main style={{marginTop: "30px"}}>
        <h2>{title} Journals</h2>
        {journals.map((journal) => (
                    <Link to={`/edit/${params.filetype}/${journal.id}`} className='actioncard' key={journal.id} style={{ textDecoration: 'none' }}>
                        <h2 className="jounrals">{journal.name}</h2>
                        <p className='author'>{journal.author}</p>
                        <p style={{marginLeft: "10px"}}>{journal.lastModified.toDate().toDateString()}</p>
                        <div className='preview'><Output data={ journal.entry } /></div>
                     </Link>                    
                    ))}  
                     <div onClick={scroll} className='actioncard'>
                        <h2>Show More</h2>
                        <p className='author'>Click to load more files.</p>
                     </div>                    
      </main>
    );
  }