I am trying to use custom SVG icons to replace the base icons from Pagination component of Material UI (V4), and I keep getting this error in the console:

Material-UI: The component prop provided to ButtonBase is invalid. Please make sure the children prop is rendered in this custom component.

Now the code I'm using in that scenario is the following (relevant pieces):

import React from 'react';
import { Pagination, PaginationItem, PaginationRenderItemParams } from '@material-ui/lab';
import { ReactComponent as ChevronLeft } from 'assets/ChevronLeft.svg';
import { ReactComponent as ChevronsLeft } from 'assets/ChevronsLeft.svg';
import { ReactComponent as ChevronRight } from 'assets/ChevronRight.svg';
import { ReactComponent as ChevronsRight } from 'assets/ChevronsRight.svg';
import { ReactComponent as ChevronDown } from 'assets/ChevronDown.svg';

const ResourceTable = (props: TableProps): JSX.Element => {

  const showPaginationItem = (item: PaginationRenderItemParams) => {
    if (item.type === 'first') {
      return (
        <PaginationItem
          {...item}
          component={React.forwardRef<SVGSVGElement>(function Link(props, _) {
            return <ChevronsLeft {...props} />;
          })}
          shape="rounded"
        />
      );
    } else if (item.type === 'previous') {
      return (
        <PaginationItem
          {...item}
          component={React.forwardRef<SVGSVGElement>(function Link(props, _) {
            return <ChevronLeft {...props} />;
          })}
          shape="rounded"
        />
      );
    } else if (item.type === 'next') {
      return (
        <PaginationItem
          {...item}
          component={React.forwardRef<SVGSVGElement>(function Link(props, _) {
            return <ChevronRight {...props} />;
          })}
          shape="rounded"
        />
      );
    } else if (item.type === 'last') {
      return (
        <PaginationItem
          {...item}
          component={React.forwardRef<SVGSVGElement>(function Link(props, _) {
            return <ChevronsRight {...props} />;
          })}
          shape="rounded"
        />
      );
    } else return <PaginationItem {...item} shape="rounded" />;
  };

  return (
    <Pagination
            count={totalPages}
            onChange={handleChangePage}
            page={page}
            renderItem={showPaginationItem}
            showFirstButton
            showLastButton
        />
  );
};

The Material UI docs suggest that I should "avoid inline functions and pass a static component to the component prop instead. I tried that as well, and the error is still there. Is there something I am missing, that would allow me to get rid of the error?

Thank you very much for your help;