JSONデータを取得し、一覧に表示させ,指定の数要素を超えるとページャーで画面を切り替えたい

JSONデータを取得し、一覧に表示させ,指定の数要素を超えるとページャーで画面を切り替えたいです。

ここに質問の内容を詳しく書いてください。
6個以上要素がある場合、ページャーで画面を切り替え、次のページにいけるようにしたいです。
URLは変更せず、切り替えるイメージです。

現状ページネーションは動いていますが、ページが最初に表示しているものから変わらない状況です。

お忙しいなかではありますが、どうぞよろしくお願い致します。

発生している問題・エラーメッセージ

エラーはでていませんが、
liTag += <li class="num" onClick="creatPager(${totalPages}, ${totalPages})"><span>${totalPages}</span></li>;

ここの部分が怪しいのかなと思っています。

該当のソースコード

//listを囲むul
const companiesList = document.getElementById("menu_list");

//検索のボタン
const searchButton = document.querySelector(".searchButton");

//検索窓
const searchBar = document.getElementById("searchBar");

//リストを格納する配列
let companies = [];

//1ページに表示させる件数
let perPage = 6;

//ページャの要素酒盗
const pagination = document.querySelector(".pagination");



//JSONデータの取得・加工
const loadList = async () => {
  try {
    const res = await fetch("./companies.json");
    companies = await res.json();
    showPaginationPage(companies);
    console.log(companies.length);
  } catch (err) {
    console.log(err);
  }
};

//企業のリストの要素 を生成・表示
const displayCompany = (companies) => {
  const listElement = companies
    .map((company) => {
      return `
            <li class="list">
              <div class="supportersListImg"><img alt=""></div>
              <div class="supportersListInfo">
                <h3 class="supportersName">${company.name}</h3>
                <p class="supportersTxt">${company.detail}</p>
              </div>
            </li>
        `;
    })
    .join("");
  companiesList.innerHTML = listElement;
};

//ページャーの生成

function creatPager(totalPages, page) {
  let activeLi;
  let liTag = "";
  let beforePages = page - 1;
  let afterPages = page + 1;

  for (let pageLength = beforePages; pageLength <= afterPages; pageLength++) {
    if (pageLength > totalPages) {
      continue;
    }
    if (pageLength == 0) {
      pageLength = pageLength + 1;
    }
    if (page === pageLength) {
      activeLi = "active";
    } else {
      activeLi = "";
    }
    liTag += `<li class="num ${activeLi}" onClick="creatPager(${totalPages}, ${pageLength})"><span>${pageLength}</span></li>`;
  }

  if (page < totalPages - 1) {
    if (page < totalPages - 2) {
      liTag += `<li class="dots"><span>...</span></li>`;
    }
    liTag += `<li class="num" onClick="creatPager(${totalPages}, ${totalPages})"><span>${totalPages}</span></li>`;
  }
  pagination.innerHTML = liTag;
}


//1ページ分表示
const showPaginationPage = (companiesData) => {
  let totalPages = Math.ceil(companiesData.length / perPage);
  console.log(totalPages);

  //1ページに表示させる分
  const displayItems = (page = 1, perPage) => {
    let index, offSet;
    if (page == 1 || page <= 0) {
      index = 0;
      offSet = perPage;
    } else if (page > companiesData.length) {
      index = page - 1;
      offSet = companiesData.length;
    } else {
      index = page * perPage - perPage;
      offSet = index + perPage;
    }

    // 加工
    const slicedItems = companiesData.slice(index, offSet);
    console.log(slicedItems);
    displayCompany(slicedItems);
  };
  creatPager(totalPages, 1);
  displayItems(1, perPage);
};

//検索の実装
searchButton.addEventListener("click", function () {
  const searchString = searchBar.value.toLowerCase();
  const filteredCompany = companies.filter((company) => {
    return company.name.toLowerCase().includes(searchString) || company.detail.toLowerCase().includes(searchString) || company.kana.includes(searchString);
  });

  showPaginationPage(filteredCompany);

  const kensuu = document.querySelector(".show");
  kensuu.innerText = `検索結果${filteredCompany.length}件です`;

  if (filteredCompany.length === 0) {
    alert("ありません");
  }
});

loadList();