How to paginate an array with Pagy and Stimulus.js?

Question

I am paginating an array that I am loading page per page when I scroll to the bottom of my page. Unfortunately it seems that some chunks of my array keep coming back instead of having the newly loaded bit of array. Any idea what this is happening ??

This is my infinite_scroll_controller.js

import Rails from '@rails/ujs';

export default class extends Controller {
    static targets = ["entries", "pagination"]

    scroll(){
        let next_page = this.paginationTarget.querySelector("a[rel='next']")
        if (next_page == null) { return }

        let url = next_page.href
        var body = document.body,
        html = document.documentElement

        var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
        
        if (window.pageYOffset >= height - window.innerHeight - 100) {
            console.log("bottom")
            this.loadMore(url)
        }
    }

    loadMore(url){
        Rails.ajax({
            type: 'GET',
            url: url,
            dataType: 'json',
            success: (data) => {
                console.log(data)
                this.entriesTarget.insertAdjacentHTML('beforeend', data.entries)
                this.paginationTarget.innerHTML = data.pagination
            }
        })
    }
}```

This is in my listing controller 

``` @listings = Listing.all.sort_by { |listing| listing.created_at }.reverse! 
   
    @pagy_a, @loaded_listings = pagy_array(@listings)
  
    respond_to do |format|
      format.html
      format.json {
        render json: { entries: render_to_string(partial: "listings", formats: [:html]), pagination: view_context.pagy_nav(@pagy_a) }
      }
    end```