Fonction imbriquée ne s'éxécute pas une deuxième fois

Bonjour à tous,

Dans le code ci-dessous servant à afficher puis paginer avec deux fetch consécutifs, tout marche bien sauf qu'en rappuyant sur un bouton de pagination à la deuxième fois apparaît du JSON au lieu d'afficher la prochaine page...

Je pense donc qu'il doit y avoir une astuce pour que le deuxième fetch imbriqué s’exécute correctement plusieurs fois...

Que fais-je mal ?

Merci d'avance

export async function filtrerOnglets(url) {
  try {
    let response = await fetch(url, {
      method: "GET",
      cache: "no-cache",
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        "Content-Type": "Application/json",
      },
    });
    let data = await response.json();
    tabContent.innerHTML = data.content;
    let pagination = document.querySelectorAll(".tabs__content span a");

    //filtrage pour pagination
    pagination.forEach((el) => {
      el.addEventListener("click", (e) => {
        e.preventDefault();
        let urlPagination = e.target.getAttribute("href");

        async function paginationAjax() {
          let response = await fetch(urlPagination, {
            method: "GET",
            cache: "no-cache",
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              "Content-Type": "Application/json",
            },
          });
          let data = await response.json();
          tabContent.innerHTML = data.content;
        }
        paginationAjax();
        console.log(urlPagination);
      });
    });
  } catch (error) {
    alert("Erreur " + error);
  }
}