firebase React データをリッスンしながらページネーション

Question

前提・実現したいこと

SNSをつくっています。使用技術は、firebaseとReactです。
firebaseのonSnapshotを使用してリアルタイムに更新したいです。

具体的には、今現在表示しているページだけをリッスンして、ページを左右のボタンで切り替えるたびにリッスンの対象を切り替えて投稿を表示することを実現したいです！

今、実装しようと試みてますが大苦戦中です。うまく動いてくれません。
ソースコードにコメントで実装の説明を書いてます。
見てもらえば、考え方などわかっていただけると思いますが、どのように改善すればいいでしょうか？

onSnapshotを使うにはUseEffectを使用すると思いますが、useEffectの制御にも苦戦しています。

該当のソースコード

  
const Record = () => {
  const user = auth.currentUser;
  const dispatch = useAppDispatch();
  const selector = useSelector(userRecordSelector);
  const classes = useStyles();
  //表示している投稿の最初と最後のレコードを保持
  const [currentFirstRecord, setCurrentFirstRecord] = useState<any>(null);
  const [currentLastRecord, setCurrentLastRecord] = useState<any>(null);
  //全投稿の一番最初と最後のレコードを保持
  const [firstRecord, setFirstRecord] = useState<any>();
  const [lastRecord, setLastRecord] = useState<any>();
  //前後のページが存在するか否か
  const [isPrevPage, setIsPrevPage] = useState(true);
  const [isNextPage, setIsNextPage] = useState(true);
  //スナップショットのクエリの切り替え用のステート
  const [direction, setDirection] = useState<"initial" | "left" | "right">("initial");

  useEffect(() => {
    //全投稿の最初の投稿を監視
    const unsubFirst = db
      .collection("users")
      .doc(user?.uid)
      .collection("userRecords")
      .orderBy("created_at", "desc")
      .limit(1)
      .onSnapshot((snapshot) => {
        setFirstRecord(snapshot.docs[0].data());
      });
    //全投稿の最後の投稿を監視
    const unsubLast = db
      .collection("users")
      .doc(user?.uid)
      .collection("userRecords")
      .orderBy("created_at")
      .limit(1)
      .onSnapshot((snapshot) => {
        setLastRecord(snapshot.docs[0].data());
      });

    return () => {
      unsubFirst();
      unsubLast();
    };
  }, [user]);

  useEffect(() => {
    if (user) {
      const limitCount = 3;
      let query: any;
      console.log(direction);
      console.log("現在のラスト", currentLastRecord);
      //directionの値に応じたクエリを生成
      switch (direction) {
        //初期の読み込み
        case "initial":
          query = db.collection("users").doc(user.uid).collection("userRecords").orderBy("created_at", "desc");
          break;
        //前のページヘの遷移時のクエリ
        case "left":
          query = db
            .collection("users")
            .doc(user.uid)
            .collection("userRecords")
            .orderBy("created_at")
            .startAfter(currentFirstRecord);
          break;
        //後のページヘの遷移時のクエリ
        case "right":
          query = db
            .collection("users")
            .doc(user.uid)
            .collection("userRecords")
            .orderBy("created_at", "desc")
            .startAfter(currentLastRecord);
          break;
      }
      console.log(query);
      const unsubscribe = query.limit(limitCount).onSnapshot((snapshot: any) => {
        const postsData: UserRecord[] = [];
        snapshot.forEach((doc: any) => {
          let data = doc.data() as UserRecord;
          console.log(data);
          //Date型にキャスト
          if (data.created_at.seconds) {
            data.created_at = data.created_at.toDate().toLocaleString();
            data.updated_at = data.updated_at.toDate().toLocaleString();
          }
          if (data.othersComments?.comments) {
            data.othersComments.comments.map((comment) => {
              if (comment.created_at.seconds) {
                comment.created_at = comment.created_at.toDate().toLocaleString();
              }
            });
          }
          postsData.push(data);
        });
        dispatch(reflectRecordData(postsData));
        //現在表示している投稿の前後を保持する。
        setCurrentFirstRecord(postsData[0]);
        setCurrentLastRecord(postsData[postsData.length - 1]);
        //現在表示している投稿に、全投稿の一番初めと最後の投稿が含まれているかを判断して、含まれている場合falseに、これを元に左右のボタンの有効無効を切り替える。
        if (postsData && firstRecord) {
          if (postsData.length > 0) {
            postsData.forEach((item: UserRecord) => {
              console.log("こっち");
              if (item.recordId === firstRecord.recordId) {
                setIsPrevPage(false);
                return;
              }
            });
            setIsPrevPage(true);
          }
        }
        if (postsData && lastRecord) {
          if (postsData.length > 0) {
            postsData.forEach((item: UserRecord) => {
              if (item.recordId === lastRecord.recordId) {
                setIsNextPage(false);
                return;
              }
            });
            setIsNextPage(true);
          }
        }
      });
      return () => {
        unsubscribe();
      };
    }
  }, [user, direction, firstRecord, lastRecord]);

  console.log(firstRecord);
  console.log(lastRecord);
  console.log(currentFirstRecord);
  console.log(currentLastRecord);
  console.log(isNextPage);
  console.log(isPrevPage);

  const handleNext = () => {
    setDirection("right");
  };
  const handlePrev = () => {
    setDirection("left");
  };
}

//以下はあまり関係のない実装です。

const handleDelete = useCallback(
    (uid: string, recordId: string) => {
      const isPost = confirm("本当に投稿を削除してよろしいでしょうか？");
      if (isPost) {
        const newPosts = selector.filter((ele: UserRecord) => ele.recordId !== recordId);
        const query = {
          uid,
          recordId,
          newPosts,
        };
        dispatch(deleteUserRecord(query));
      }
    },
    [selector]
  );

  return (
    <>
      <Head>
        <title>STUDIOUS 学習記録</title>
      </Head>
      {selector?.length !== 0 ? (
        <>
          <section className={`c-section-wrapping--main`}>
            {selector?.map((post) => (
              <PostCard handleDelete={handleDelete} key={post.recordId} post={post} />
            ))}
            <IconButton onClick={handlePrev}>
              <FontAwesomeIcon icon={["fas", "chevron-left"]} />
            </IconButton>
            <IconButton onClick={handleNext}>
              <FontAwesomeIcon icon={["fas", "chevron-right"]} />
            </IconButton>
          </section>
        </>
      ) : (
        <div className={`${classes.noPostRoot} c-section-container`}>
          <h1>投稿がありません。作成してみよう！</h1>
          <div className="module-spacer--medium" />
          <Link href="/record/edit">
            <a>投稿作成ページへ</a>
          </Link>
        </div>
      )}
    </>
  );