React-Infinite-Scroll-Component re-render error (Maximum update depth exceeded)

Question

Good day. I am implementing a list page that will involve infinite scroll. I am getting my data from a Laravel API and I am fetching the data with react query. This page also has a search functionality. For the query, I am using useInfiniteQuery hook as shown below.

const fetchValues = async (pageParam, searchTerm) => {
  let url = 'http://127.0.0.1:8001/api/actors?page=' + pageParam;
  if (searchTerm) {
    url = url + '&search_term=' + searchTerm;
  }
  const result = axios.get(url);

  return result;
};

export const usePaginatedQuery = (getNextPageParam, searchTerm) => {
  return useInfiniteQuery(
    ['actorsss', searchTerm],
    ({ pageParam = 1 }) => fetchValues(pageParam, searchTerm),
    {
      getNextPageParam,
    },
  );
};

The data gets displayed well and the scroll works. However, when I try to search, after hitting the enter button, I get this error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops 

I don't know what I am doing wrong. My display code looks like this:

import React, { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { usePaginatedQuery } from '../hooks/useActorsData';

const InfiniteScrollApp = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchcontainer, setSearchContainer] = useState('');

  const getNextPageParam = (lastPage) => {
    if (lastPage.data.next_page_url) {
      return lastPage.data.current_page + 1;
    }
    return undefined;
  };
  const { data, hasNextPage, fetchNextPage, isLoading } = usePaginatedQuery(
    getNextPageParam,
    searchTerm,
  );

  const results = data?.pages?.reduce((acc, page) => {
    return [...acc, ...page.data.data];
  }, []);

  const handleSearchChange = (event) => {
    const searchValue = event.target.value;
    if (searchValue.length === 0) {
      setSearchTerm('');
    }
    setSearchContainer(searchValue);
  };

  const handleSearchClick = () => {
    setSearchTerm(searchcontainer);
  };

  return (
    <div>
      {/* Search */}
      <input value={searchcontainer} onChange={handleSearchChange} />
      <button onClick={handleSearchClick}>Search</button>

      {hasNextPage && <button onClick={fetchNextPage}>More</button>}

      <div>
        <InfiniteScroll
          dataLength={data?.pages?.length * 10}
          next={() => fetchNextPage()}
          hasMore={hasNextPage}
          endMessage={'End of data'}
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '1em',
          }}
          height={350}
          loader={'Loading...'}
        >
          {!isLoading ? (
            <>
              {results?.map((actor) => {
                return <div key={actor.id}>{actor.name}</div>;
              })}
            </>
          ) : (
            'Loading....'
          )}
        </InfiniteScroll>
      </div>
    </div>
  );
};

export default InfiniteScrollApp;

Further inspection shows that the error is from the react-infinite-scroll-component package, because if I remove the package and fetch with just the "More" button (fetchNextPage), it works fine.

Please, what may be the cause of this? Is there a better way of doing it?

Thanks in advance.