I am implementing Material UI paging in a developed application using NEXT JS.

I started by adding the pagination component :

        <Pagination
          siblingCount={2}
          page={parseInt(props.page||1)}
          count={parseInt(props.total_pages)}
          renderItem={(item) => (
            <>
            <PaginationItem
              component={MaterialUiLink}
              query={query}
              item={item}
              {...item}
            />
            </>
          )}
        />
      </>

Then I defined a functional component that will be props of PaginationItem (component={MaterialUiLink}) :

export function MaterialUiLink({item, query, ...props}:MaterialUiLinkProps) {
  return <Link href={{
    pathname: searchListing,
    query: {...query, page: item.page}
  }}><Button {...props}></Button></Link>;
}

But when I went to the page and opened the devtools console, I found two errors:

• Warning: Failed prop type: Invalid prop component supplied to ForwardRef(ButtonBase). Expected an element type that can hold a ref. Did you accidentally provide a plain function component instead? For more information see https://mui.com/r/caveat-with-refs-guide
• Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of MuiButtonBaseRoot.

At no point did I define a MuiButtonBase component, where does the error come from? How can I handle this ?