Not working pagination after search -React - reactjs

Question

I use to react-paginate package for paginate. After searching, the pagination pattern is broken. While there should be 5 items per page, this situation breaks down after the search. I share my ss and codes. thanks for your time.
here is default paginate:
and after search paginate:
and here is my code:
const displayUsers = (users, setUsers, userCurrentPage) => { // pagination configs
const startIndex = (userCurrentPage - 1) * 5
const endIndex = userCurrentPage * 5
const productsToDisplay = users.slice(startIndex, endIndex)
setUsers(productsToDisplay)
}
const handleSearch = (e) => { // filter script
let searchValue = e.target.value
let filteredTasks = users.filter((task) => {
return task.UserID.toLowerCase().includes(searchValue.toLowerCase())
})
setPaginationUsers(filteredTasks)
}
useEffect(() => {
if (searchfield === '') {
setPaginationUsers(users)
} else {
const dynamicFilter = users.filter((user) => {
return user.UserID.toLowerCase().includes(searchfield.toLowerCase())
})
setPaginationUsers(dynamicFilter)
}
}, [searchfield])
// And here is mapping area
{paginationUsers.map((userDetail, index) => {
const {
UserID,
Country,
City,
MMA,
Time,
Game,
Revenue,
Timezone,
Device_Model,
Ad_Type,
SubNetwork,
} = userDetail
if (typeof userDetail.Revenue === 'string') {
userDetail.Revenue = parseFloat(userDetail.Revenue).toFixed(6)
}
return (
<tr key={index}>
<td>{UserID}</td>
<td>{Country}</td>
<td>{City}</td>
<td>{MMA}</td>
<td>{SubNetwork}</td>
<td>{Time}</td>
<td>{Revenue}</td>
<td>{Game}</td>
<td>{Timezone}</td>
<td>{Device_Model}</td>
<td>{Ad_Type}</td>
</tr>
)
})}