Cannot read property 'main' of undefined in MUI v5

Question

I was following the tutorial to add page pagination for my Table and now I have this error in my browser :

   Uncaught TypeError: Cannot read property 'main' of undefined
    at ButtonRoot.ownerState.ownerState (Button.js:80)
    at transformedStyleArg (createStyled.js:189)
    at handleInterpolation (emotion-serialize.browser.esm.js:137)
    at serializeStyles (emotion-serialize.browser.esm.js:262)
    at emotion-styled-base.browser.esm.js:131
    at emotion-element-cbed451f.browser.esm.js:36
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)

Which completely prevents me from displaying my page. I know there are big style changes from mui v4 to mui v5, I managed to "dodge" them by using simple CSS. So I don't understand my mistake at all. Especially since the error seems to be located in a "ButtonRoot" ? :

backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),

So here is my code where I use a "theme" (I normally have the same code as the tutorial) :

import { useTheme } from '@mui/material';

import LastPageOutlinedIcon from "@mui/icons-material/LastPageOutlined";
import FirstPageIcon from "@mui/icons-material/FirstPage";
import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";

function TablePaginationActions(props) {
  const theme = useTheme();
  const { count, page, rowsPerPage, onPageChange } = props;

  const handleFirstPageButtonClick = (event) => {
    onPageChange(event, 0);
  };

  const handleBackButtonClick = (event) => {
    onPageChange(event, page - 1);
  };

  const handleNextButtonClick = (event) => {
    onPageChange(event, page + 1);
  };

  const handleLastPageButtonClick = (event) => {
    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
  };

  return (
    <div style={{ flexShrink: 0, marginLeft: 2.5 }}>
      <IconButton
        onClick={handleFirstPageButtonClick}
        disabled={page === 0}
        aria-label="Première page"
      >
        {theme.direction === "rtl" ? (
          <LastPageOutlinedIcon />
        ) : (
          <FirstPageIcon />
        )}
      </IconButton>

      <IconButton
        onClick={handleBackButtonClick}
        disabled={page === 0}
        aria-label="Page précédente"
      >
        {theme.direction === "rtl" ? (
          <KeyboardArrowRightIcon />
        ) : (
          <KeyboardArrowLeftIcon />
        )}
      </IconButton>

      <IconButton
        onClick={handleNextButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="Page suivante"
      >
        {theme.direction === "rtl" ? (
          <KeyboardArrowLeftIcon />
        ) : (
          <KeyboardArrowRightIcon />
        )}
      </IconButton>

      <IconButton
        onClick={handleLastPageButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="Dernière page"
      >
        {theme.direction === "rtl" ? (
          <FirstPageIcon />
        ) : (
          <LastPageOutlinedIcon />
        )}
      </IconButton>
    </div>
  );
}

export default function Importation() {

  // Pagination
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  TablePaginationActions.propTypes = {
    count: PropTypes.number.isRequired,
    onPageChange: PropTypes.func.isRequired,
    page: PropTypes.number.isRequired,
    rowsPerPage: PropTypes.number.isRequired,
  };

  // Permet de changer de page
  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  return (
    <Grid
      container
      style={{ width: "100%", minHeight: "90vh" }}
      {...getRootProps()}
    >
 
      <TablePagination
        component="div"
        rowsPerPageOptions={[]}
        count={fichiers.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        ActionsComponent={TablePaginationActions}
      />
    </Grid>
  );
}

Note : It's note the full page (+1000 lines) but I think my problem comes from this "theme" style.

Finally, the code of the tutorial, on which I base myself : https://codesandbox.io/s/ccw8hm?file=/demo.js