Implementé el desplazamiento infinito en mi aplicación MERN, funciona bien, además de eso, también puedo buscar un artículo específico (al instante). Si los elementos coinciden con el texto del área de búsqueda, automáticamente obtiene datos del servidor y los muestra en la pantalla y también puedo paginar estos resultados de búsqueda PERO cuando limpio el área de entrada de búsqueda no puedo usar la función de paginación porque el número de "página" (useState) aumentó automáticamente en el paso anterior ¿Cómo puedo manejar este problema?

 useEffect(() => { const getData = async () => { const { data } = await axios( search ? `http://localhost:3003/api/product/pagination?page=0&search=${search}` : `http://localhost:3003/api/product/pagination?page=0` ); setData(data.posts); }; if (search.length === 0 || search.length > 2) { getData(); } }, [search]); const fetchPosts = async () => { const { data } = await axios( `http://localhost:3003/api/product/pagination?page=${page}&search=${search}` ); return data.posts; }; const fetchData = async () => { const postsFromServer = await fetchPosts(); setData([...data, ...postsFromServer]); if (postsFromServer.length === 0 || postsFromServer.length < 4) { setHasMore(false); } setPage(page + 1); }; return ( <> <InfiniteScroll dataLength={data.length} //This is important field to render the next data next={fetchData} hasMore={hasMore} loader={<h4>Loading...</h4>} > <Container> .map((item) => { const { _id, kampaniyaName, owner, aboutProduct, startDate, endDate, price, category, image, } = item; return ( <div key={item._id}> <Card _id={_id} name={kampaniyaName} company={owner} about={aboutProduct} date={timeLeft(startDate, endDate)} price={price} category={category} image={image} data={item} /> </div> ); })} </Container> </InfiniteScroll> </> ); }; export default Home;