React dynamic pagination with fetch api

I’m using TheMovieDB API to get my datas. Like any good and useful application, the data displaying must have a pagination.

I’m trying join my request api with this simple and useful lib called react-paginating

This is the basic demo, see this to understand it better: https://codesandbox.io/s/z2rr7z23ol

In this demo, the data is mocked in fruits variable. I’ve my own method that call to themoviedb api to get my datas (the paramether Thor is just to exemplify):

    searchData = async pageNumber => {
      let url = new URL("https://api.themoviedb.org/3/search/movie?"),
        params = {
          api_key: "1b81b68eab6ab1714626504a1e36be3a",
          language: "en-US",
          query: "Thor",
          page: pageNumber,
          include_adult: false
        };
      Object.keys(params).forEach(key =>
        url.searchParams.append(key, params[key])
      );
    
      try {
        const response = await fetch(url);
        const dataMovie = await response.json();
    
        this.setState({
          movieData: dataMovie
        });
      } catch (err) {
        console.log("fetch failed", err);
      }
    };

So Here I will display my data api content:

    <ul>
      {this.state.movieData.results[currentPage - 1].map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>

The API doesn’t have a data limit parameter, it depends on the search string it can have 10, 20 results at a time. I thought to limit the quantity to 5 or 10 items using the same example of react-paginating:

    try {
      const response = await fetch(url);
      const dataMovie = await response.json();

      this.setState({
        movieData: dataMovie
      });

      //After get data, now I must rewrite my control variables
      //limit = 5;
      //pageCount = dataMovie.page;
      //total = dataMovie.total_results.length * limit;
    } catch (err) {
      console.log("fetch failed", err);
    }

And in the Pagination component somehow I need to iterate every click with my searchDatamethod call passing the “page” parameter:

    <Pagination
      total={total}
      limit={limit}
      pageCount={pageCount}
      currentPage={currentPage}
    >
      {({
        pages,
        currentPage,
        hasNextPage,
        hasPreviousPage,
        previousPage,
        nextPage,
        totalPages,
        getPageItemProps
      }) => (
        <div>
          {/* When i click in each pagination item I nedd to call my `searchData` passing the increment `page` to my api request like:
            this.searchData(numberPage) (1, 2, 3....)
            */}
          {pages.map(page => {
            let activePage = null;
            if (currentPage === page) {
              activePage = { backgroundColor: "#fdce09" };
            }
            return (
              <button
                {...getPageItemProps({
                  pageValue: page,
                  key: page,
                  style: activePage,
                  onPageChange: this.handlePageChange
                })}
              >
                {page}
              </button>
            );
          })}
        </div>
      )}
    </Pagination>

I understand that this is a path of modifications to be made, I tried in some ways but I was unsuccessful. I create a codesandbox with all code, so you can see all the code running:

So, how can I turn this pagination dynamic with my searchData() method… Where with each new click, the method is called and the data is updated?

Someone can help me?