Pagination in react using React Hooks and Pagination by MaterialUI

Consider the following code:

 const [currentPage , setCurrentPage] = useState(2)
 const {previousPage , setPreviousPage} = useState(0)



 const handlePageChange = (event , value) =>{
        console.log(value);
        setCurrentPage(previousPage+value)
        setPreviousPage(previousPage+value)
    }

return(
     {panels && panels.slice(previousPage,currentPage).filter((panel)=> panel.circlePrivacy == 'Public' ).map((panel)=>(
                        <div className='garden-card' >
                    <img className='wave-top' src={top} alt='img' />
                    <h1 className='circle-h1' >Circle Name: Tulip</h1>
                    <div className='garden-main-card' >
                        <div className='garden-image-section' >
                            <img src={panel.circleImage} width='300px' className='garden-img' alt='img' />
                            <h1 className='traditional-susu' >Traditional Susu</h1>
                        </div>
                        <div className='garden-detail-section' >
                            <h2>Circle Name: {panel.panelName}</h2>
                            <p>Circle Owner:{panel.panelOwnerName}</p>
                            <p>Circle Start Date: {panel.circleStartDate} </p>
                            <p>Plan: {panel.panelPlan} </p>
                            <p>Circle Privacy: {} </p>
                            <p>Cycle Amount: {Math.ceil(panel.giftingAmount / panel.panelMemberCount)} </p>
                            <p>Gifting Amount: {panel.giftingAmount} </p>
                        </div>
                    </div>
                    <div className='joining-section' >
                        <button className='joining-flower-btn' >Join Flower</button>
                        <div className='reward-section' >
                            <h2>2000 USD</h2>
                        </div>
                    </div>
    
                    <img className='wave-bottom' src={bottom} alt='img' />
                </div>
                    ))
                }
                <div style= >
                <Pagination count={Math.ceil(panels?.length/2)} color='primary' shape='rounded' style= onChange={handlePageChange} />
)

What I want to do is to show two items per page. MaterialUI pagination has a function that I passed and has two params event and value.

But I cannot make any progress ahead because whenever I try to execute it, the whole page disappears. Any idea how can I implement it????