Array Length and Page Changing Issue

[irtaza9]

Issue/Bug/Scenario

I'm facing an issue regarding page changing while the length of array is changed. I'm mapping an array and showing 8 items per page, when I go into page 2 and delete 7 items it work fine and stay in page 2 but the issue occurs when i delete the 8th item, the props.images(array) changes, the pagecount also change from 2 -> 1 but pageNumber does remain same(1) not 0. I want to update the pageNumber when the length of data is change. Any sort of tips will help me to resolve this bug, Thank you.

Code

  const [pageNumber, setPageNumber] = useState(0);
  const bulletinsPerPage = 8;
  const pagesVisited = pageNumber * bulletinsPerPage;
 
  const handlePageChange = ({ selected }) => {
    setPageNumber(selected);
  };

 const displayBulletins = props?.images
    .slice(pagesVisited, pagesVisited + bulletinsPerPage)
    .map((image, index) => {
      return (
        <Grid item xs={12} md={4} lg={3} key={index}>
          <Item
            className="imagebackdropoverlay"
            style={{
              backgroundImage: `url(${image.txt_media_streaming_link})`,
              width: "100%",
              height: "200px",
              position: "relative",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
            }}
          >
            <div className="mediainformationandactions">
              <div className="p-2">
                <DeleteOutlineIcon
                  className="deleteiconimgs"
                  onClick={() => props?.handleEnquireMedia(image)}
                />
                <VisibilityIcon
                  className="viewiconimgs"
                  onClick={() =>
                    handleOpenImage(image.txt_media_streaming_link)
                  }
                />
                {image.is_offline_available === false ? (
                  <OfflinePinIcon
                    className="offlineiconimgs"
                    onClick={() => props.handleMediaAsOffline(image)}
                  />
                ) : image.is_offline_available === true ? (
                  <RemoveDoneIcon
                    className="onlineiconimgs"
                    onClick={() => props.handleMediaAsOffline(image)}
                  />
                ) : null}
              </div>
            </div>
          </Item>
        </Grid>
      );
    });

  const pageCount = Math.ceil(props?.images?.length / bulletinsPerPage);

      <ReactPaginate
        breakLabel="..."
        nextLabel="Next >"
        previousLabel="< Previous"
        renderOnZeroPageCount={null}
        pageCount={pageCount}
        onPageChange={onPageChange}
        breakClassName={"page-item"}
        breakLinkClassName={"page-link"}
        containerClassName={"pagination"}
        pageClassName={"page-item"}
        pageLinkClassName={"page-link"}
        previousClassName={"page-item"}
        previousLinkClassName={"page-link"}
        nextClassName={"page-item"}
        nextLinkClassName={"page-link"}
        activeClassName={"active"}
      />