Как объединить search и pagination в React?

Question

[Anfield94]

Добрый день, имеется 2 компонента, один отвечает за пагинацию, другой за поиск, в итоге работать по-человечески может только одно из двух, если пагинация отрабаывате, то поиск не работает и наоборот, представляю, что их нужно объединить в один компонент и делать только один гет запрос и соотвественно там уже слайсы, фильтры и все остальное, но абсолютно не понимаю как это сделать, может кто подскажет, спасибо, вот код
Pagination:

function Paginate() {
  const [offset, setOffset] = useState(0);
  const [data, setData] = useState([]);
  const [perPage] = useState(5);
  const [pageCount, setPageCount] = useState(0)


  const getData = async() => {
      const res = await axios.get('http://localhost:5000/business')
      const data = res.data;
                const slice = data.slice(offset, offset + perPage)
                const postData = slice.map((item) => (
                    <Item key={item.id} {...item} />
                ))
                setData(postData)
                setPageCount(Math.ceil(data.length / perPage))
  }
  const handlePageClick = (e) => {
    const selectedPage = e.selected;
    setOffset(selectedPage * perPage)
};

 useEffect(() => {
   getData()
 }, [offset])

  return (
    <div className="App">
      {data}
       <ReactPaginate
                    previousLabel={"prev"}
                    nextLabel={"next"}
                    breakLabel={"..."}
                    breakClassName={"break-me"}
                    pageCount={pageCount}
                    marginPagesDisplayed={2}
                    pageRangeDisplayed={5}
                    onPageChange={handlePageClick}
                    containerClassName={"pagination"}
                    subContainerClassName={"pages pagination"}
                    activeClassName={"active"}/>
    </div>
  );
}

export default Paginate;

Search:

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import Item from './Player.js';
import './Search.scss';
import Paginate from './Paginate.js';
const SearchBar = () => {
    const [business, setBusiness] = useState([]);
    const [value, setValue] = useState('');
    

    const getBusiness = () => {
        axios.get('http://localhost:5000/business')
        .then((response) => {
            setBusiness(response.data)
        })
    }
    useEffect(() => {
        getBusiness()
    }, [])

    const filtered = business.filter(item => {
        return item.player_name.toLowerCase().includes(value.toLowerCase())
    })

    return (
        <>
    <div className="form">
    <form className="search_form">
        <input
            type="text"
            placeholder="Players"
            onChange={(event) => setValue(event.target.value)}
        />
    </form>
    </div>
    <div className="players">
        <Paginate />
        {/* {
            filtered.map((item, index, ) => {
                return (
                    <Item item={item} key={index} />
                )
            })
        } */}
    </div>
    </>
    );
    };

export default SearchBar;