Проблема с разбивкой на страницы Firestore - Javascript (Интернет)

Question

Я создал веб-сайт о недвижимости, но у меня проблема с разбивкой на страницы пожарного магазина. У меня есть 12 документов (свойств) в базе данных firestore, и я установил ограничение для каждой страницы разбивки на страницы, чтобы отображать 9 свойств на каждой странице разбивки на страницы. Однако, когда я запускаю свое приложение, оно показывает только 3 свойства на домашней странице, затем, когда я нажимаю кнопку «Далее», отображается 9 свойств, а затем, когда я нажимаю кнопку «Предыдущая», отображается только 8 свойств. Примечание: на первой и второй страницах пагинации некоторые свойства дублируются .. Буду признателен, если вы можете помочь. это мой код:

let state;

// get data from the cloud Database and display it on the home page
db.collection("properties").orderBy("date").limit(3).onSnapshot((snapshot) => {
  setupProp(snapshot.docs);
  state = snapshot.docs;

  lastVisible = snapshot.docs[snapshot.docs.length - 1];
  firstVisible = snapshot.docs[snapshot.docs.length - 1];

});
// Function to display the next page
$(".next-prop").on('click', function () {
  $(".showing-prop").html('');
  const next = db.collection("properties")
    .orderBy("date")
    .startAfter(lastVisible)
    .limit(9);
    next.onSnapshot((snapshot) => {
      setupProp(snapshot.docs)
      state = snapshot.docs


    })
})
// Function to display the prev page
$(".prev-prop").on('click', function () {
  $(".showing-prop").html('');
  const previous = db.collection("properties")
    .orderBy("date")
    .startAt(firstVisible)
    .limit(9);
    previous.onSnapshot((snapshot) => {
      setupProp(snapshot.docs)
      state = snapshot.docs      
    });
})