Render issues on Next.js 13.5.4 after upgrading from 13.4.12

[camcamcamcam]

Bumped up my version of Next.js to silence a vulnerability notice, and after doing so react-paginate no longer works correctly. Getting around it for now by locking my version to 13.4.12, but not a fan of this solution.

Expected behaviour (on 13.4.12):

<ul class="pagination col-span-full gap-3 flex justify-center font-bold my-16" role="navigation" aria-label="Pagination">
   <li class="previous disabled"><a class="h-full flex items-center rotate-180 mr-5 " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev"><img alt="Previous Page" loading="lazy" width="15" height="9" decoding="async" data-nimg="1" class="inline-block" style="color: transparent;" src="/_next/static/media/icon-arrow-right.0ababecc.svg"></a></li>
   <li class="selected"><a rel="canonical" role="button" class="flex font-black" tabindex="-1" aria-label="Page 1 is your current page" aria-current="page">1</a></li>
   <li><a rel="next" role="button" class="flex" tabindex="0" aria-label="Page 2">2</a></li>
   <li><a role="button" class="flex" tabindex="0" aria-label="Page 3">3</a></li>
   <li><a role="button" class="flex" tabindex="0" aria-label="Page 4">4</a></li>
   <li class="break"><a role="button" tabindex="0" aria-label="Jump forward">...</a></li>
   <li><a role="button" class="flex" tabindex="0" aria-label="Page 13">13</a></li>
   <li class="next"><a class="h-full flex items-center ml-5" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next"><img alt="Next Page" loading="lazy" width="15" height="9" decoding="async" data-nimg="1" class="inline-block" style="color: transparent;" src="/_next/static/media/icon-arrow-right.0ababecc.svg"></a></li>
</ul>

What happens (on 13.5.4):

<ul class="pagination col-span-full gap-3 flex justify-center font-bold my-16" role="navigation" aria-label="Pagination">
   <li class="previous disabled"><a class="h-full flex items-center rotate-180 mr-5 " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev"><img alt="Previous Page" loading="lazy" width="15" height="9" decoding="async" data-nimg="1" class="inline-block" style="color: transparent;" src="/_next/static/media/icon-arrow-right.0ababecc.svg"></a></li>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <li class="break"><a role="button" tabindex="0" aria-label="Jump forward">...</a></li>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <li class="next"><a class="h-full flex items-center ml-5" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next"><img alt="Next Page" loading="lazy" width="15" height="9" decoding="async" data-nimg="1" class="inline-block" style="color: transparent;" src="/_next/static/media/icon-arrow-right.0ababecc.svg"></a></li>
</ul>

Here is the JS of one of the pages that has pagination, if that helps. All instances of ReactPaginate on this site are experiencing this.

import { useEffect, useState } from 'react';
import NextImage from 'next/image';
import ReactPaginate from 'react-paginate';

// assets
import iconArrowRight from '@/images/icon-arrow-right.svg';

// components
import EventList from '@/components/Event/EventsList';

export default function PaginatedEvents({ data }) {
  // pagination
  const [itemOffset, setItemOffset] = useState(0);

  // Simulate fetching items from another resources.
  // (This could be items from props; or items loaded in a local state
  // from an API endpoint with useEffect and useState)
  const events = data;

  const itemsPerPage = 6;
  const endOffset = itemOffset + itemsPerPage;
  const pageCount = Math.ceil(events.length / itemsPerPage);
  const currentEvents = events.slice(itemOffset, endOffset);

  // Invoke when user click to request another page.
  const [currentPage, setCurrentPage] = useState(0);
  const handlePageClick = (event) => {
    setCurrentPage(event.selected);
    const newOffset = (event.selected * itemsPerPage) % events.length;
    setItemOffset(newOffset);
  };

  const Pagination = () => (
    <ReactPaginate
      onPageChange={handlePageClick}
      pageRangeDisplayed={4}
      marginPagesDisplayed={1}
      pageCount={pageCount}
      forcePage={currentPage}
      pageLinkClassName='flex'
      activeLinkClassName='font-black'
      breakLabel='...'
      nextLinkClassName='h-full flex items-center ml-5'
      nextLabel={
        <NextImage
          src={iconArrowRight}
          className='inline-block'
          alt='Next Page'
        />
      }
      previousLinkClassName='h-full flex items-center rotate-180 mr-5'
      previousLabel={
        <NextImage
          src={iconArrowRight}
          className='inline-block'
          alt='Previous Page'
        />
      }
      renderOnZeroPageCount={null}
      className={'pagination col-span-full gap-3 flex justify-center font-bold my-16'}
    />
  );

  useEffect(() => {
    const eventList = document.getElementById('event-list');
    window.scrollTo({
      top: eventList.scrollTop,
      behavior: 'smooth',
    });

  }, [currentPage]);

  return (
    <div className='event-list' id='event-list'>
      <Pagination />
      <EventList events={currentEvents} />
      <Pagination />
    </div>
  );
}