Pagiantion button not calculated automatically

[BibhabenduMukherjee]

function BlogDsList() {
const postsPerPage = 4;
const [items, setItems] = useState([]);
useEffect(() => {
client.fetch(*[_type == 'post' && topic =='ds']{ ..., author->, categories[]-> } | order(_createdAt )).then(res => {
itemsToSend.push(...res);
});
}, []);
const action = (page, range, items) => {
console.log(Page: ${page} 📃, Range: ${range} 🚀, Items: ${items} 🌀);
setItems(items);
};

return (

<div className="paginationContent">
  {items.map((post) => {
    return <div key={post._id} className='mt-5 pl-8 cursor-pointer hover:bg-gray-200 p-2 flex flex-col shadow-md rounded-md bg-gray-100 '>

{post._updatedAt}

{post.title}

{post.description}

Read Post

; })}

{/* Props required: action, postsPerPage, postsLength */}
<Pagination
    paginationStyle={"centerMode"}
    items={itemsToSend}
    action={action}
    postsPerPage={postsPerPage}
    nextButton={true}
    prevButton={true}
    nextButtonLabel={"👉🏻"}
    prevButtonLabel={"👈🏻"}
  />

) } I have this above component That shows some post.But in my case pagination button are not calculated perfectly example i have 8 post if i want that 4 post should be render in one page so the total page should be 2(max) it can't go beyond that but in my case i have 4 tab some repeated data shows. Please help me out 🙏🏻