Live pagination on search bar with hooks in reactjs - reactjs

Question

Hello guys i am trying to implement the live pagination of searched items. I have done only the pagination for all the products but not for the searching ones and i am having some problems into writting it.
Thank you for your time.
This is app.js:
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
const [currentData, setCurrentData] = useState([]);
const [columns, setColumns] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [dataPerPage, setDataPerPage] = useState(10);
const [searchTerm, setSearchTerm] = useState("");
const [filteredProduct, setFilteredProducts] = useState("");
useEffect(() => {
var myHeaders = new Headers();
myHeaders.append("Accept", "text/plain");
myHeaders.append(
"Authorization",
"Bearer xxx"
);
var requestOptions = {
method: "GET",
headers: myHeaders,
redirect: "follow",
};
fetch("http://localhost:5000/api/WarehousStock", requestOptions)
.then((response) => response.json())
.then((result) => {
setData(result);
})
.catch((error) => console.log("error", error))
.finally(() => setLoading(false));
}, []);
// this will run evertime one of the following state will change => data, currentPage, dataPerPage
useEffect(() => {
// generate dynamically columns from first object from array
setColumns(
Object.keys(data[0] || []).map((key) => ({
Header: key,
accessor: key,
}))
);
filterData();
}, [data, currentPage, dataPerPage]);
var paginate = (pageNumber) => setCurrentPage(pageNumber);
function filterData() {
const indexOfLastData = currentPage * dataPerPage;
const indexOfFirstData = indexOfLastData - dataPerPage;
// if there is a search term
if (searchTerm !== '') {
let result =
data.filter(data => {
return data.articleName.toLowerCase().includes(searchTerm.toLowerCase())
})
result = result.slice(indexOfFirstData, indexOfLastData)
setCurrentData([...result])
} else {
// if there is no a search term
setCurrentData(data.slice(indexOfFirstData, indexOfLastData));
}
}
useEffect(() => {
filterData();
}, [searchTerm])
if (loading) return <p>Loading...</p>;
return (
<Styles>
<div className="SearchButton"><input type="text" placeholder="Search name of product" onChange={event => { setSearchTerm(event.target.value) }} /></div>
<Table columns={columns} data={currentData} />
<Pagination
dataPerPage={dataPerPage}
totalData={data.length}
paginate={paginate}
/>
</Styles>
);
}
This is the pagination component:
const Pagination = ({ dataPerPage, totalData, paginate }) => {
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalData / dataPerPage); i++) {
pageNumbers.push(i);
}
return (
<nav>
<ul className="pagination mt-4">
{pageNumbers.map((number) => (
<li key={number} className="page-item">
<a onClick={() => paginate(number)} href="!#" className="page-link">
{number}
</a>
</li>
))}
</ul>
</nav>
);
};
Thank you for your help!