Is there a way to use a Next.js Link together with MUI's Pagination component?

I use Next.js and the MUI design system in my project. In one of the components I use a table with multiple pages and use the Pagination component from the MUI to view different pages in the table. At the moment I use the a tag but I want to be able to use Next.JS' Link component instead.

This is what my working code looks like:

 <PaginationItem
   component={'a'}
   href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}
   {...item}
  />

This is what I tried to write:

 <PaginationItem
   component={Link}
   href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}
   {...item}
  />

I get this error message: Error: Multiple children were passed to <Link> with 'href' of '/tunes?page=0' but only one child is supported https://nextjs.org/docs/messages/link-multiple-children Open your browser's console to view the Component stack trace.

So the problem seems to be that MUI Pagination component fits two children inside Link, although the Link tag only tolerates one. It looks like this in the console (when using the a tag):

<a
  class='MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-sizeSmall MuiPaginationItem-text MuiPaginationItem-circular MuiPaginationItem-textPrimary MuiPaginationItem-page css-1vj5it5-MuiButtonBase-root-MuiPaginationItem-root'
  tabindex='0'
  href='/tunes?page=3'
  aria-label='Go to page 3'
>
  3
  <span class='MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root'></span>
</a>

Is there a way to combine Next.js' Link component with MUI's Pagination component? Maybe wrap the items inside <PaginationItem> somehow, or make Link accept more than one child inside it?

You should wrap the PaginationItem inside the Link component, rather than the other way around.

Here's how you can do it:

<Pagination
  count={count}
  page={Number(page)}
  renderItem={(item) => (
    <Link href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}>
      <PaginationItem {...item} />
    </Link>
  )}
/>