I am trying to use intersection observer to continuously call an api. But the api call happens only for the first time

I am trying to call the api when I reach the bottom of the element(once 100% of the content is loaded in the viewport). But the api call is happening only for the first time and it is not triggered for the next attempt. The following is the js code which I have written

      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) {
            return
          }
          triggerProductCards($(selectorCardGrid));
        })
      }, {
        threshold: [1.0]
      });

      const target = document.getElementById('ajax-card-grid__items');
      observer.observe(target);

Here triggerProductCards is the function where I have written my logic for the ajax api call.

    const triggerProductCards = function(triggerEvent) {
        var query = currentQuery();
        query.grid_type = triggerEvent
          .closest("[data-layer-grid-type]")
          .attr("data-layer-grid-type");
        query.action_type = "results";
        query.page_id = triggerEvent
          .closest(".card-grid-results")
          .attr("data-layer-page-id");
        query.page_revision_id = triggerEvent
          .closest(".card-grid-results")
          .attr("data-layer-page-revision-id");
        if (query.grid_type === "grid") {
          query.grid_id = triggerEvent
            .closest(".card-grid-results")
            .attr("data-layer-grid-id");
          $(".ajax-card-grid__more-link").css({'pointer-events':'none', 'opacity':'0.6'});
        }
        var selectorContext = triggerEvent;
        var searchItems = selectorContext
          .closest(".ajax-card-grid__content")
          .find(".ajax-card-grid__items");
        query.offset = searchItems.children().length;

        if (query.grid_type === "grid" || query.grid_type === "search_page") {
          query.limit = Drupal.behaviors.loadMorePager.getLimitByGridType(
            query.grid_type
          );
        }

        return $.ajax({
          url:
            drupalSettings.path.baseUrl +
            drupalSettings.path.pathPrefix +
            "search-callback",
          data: query,
          success: function (data) {
            if (data.results !== null) {
              data.results.forEach(function (element) {
                var elementWrapper = document.createElement("div");
                elementWrapper.className = "ajax-card-grid__item_wrapper";
                elementWrapper.innerHTML = element;
                searchItems.append(elementWrapper);
                Drupal.behaviors.productCard.attach(searchItems);
              });
              if (!data.pager) {
                selectorContext
                  .closest(".ajax-card-grid__content")
                  .find(".ajax-card-grid__more-link")
                  .removeClass("active");
              }
            }
            setTimeout(function () { $('.ajax-card-grid__more-link').removeAttr('style'); }, 500);
          },
          beforeSend: function() {
            $(selectorCardGrid).removeClass("back-to-default");
            if(drupalSettings.mars_product.loader) {
              $('.cv-spinner').addClass('pager');
              $("#overlay").show();
            }
          },
          complete: function () {
            if(drupalSettings.mars_product.loader) {
              setTimeout(function(){ $("#overlay").fadeOut(300); $('.cv-spinner').removeClass('pager'); },500);
            }
            $(selectorCardGrid).addClass("back-to-default");
            setTimeout(function () { $('.ajax-card-grid__more-link').removeAttr('style'); }, 500);
          },
        });
      }

Can some one help me what I am missing or what is wrong with my code. Thanks in advance.