In Material-UI pagination, the options in Select field are left aligned only in FIREFOX browser when I use native: true in SelectProps and also the styles are not applying at the same time. Can anyone help me how to make the options center aligned in dropdown field in Firefox browser.

Screenshot:

code:

    <TablePagination
          rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
          colSpan={3}
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          SelectProps={{
            inputProps: { "aria-label": "rows per page" },
            MenuProps: { classes: { paper: classes.menuItem } },
            native: true
          }}
          classes={{ menuItem: classes.menuItem }}
          onChangePage={handleChangePage}
          onChangeRowsPerPage={handleChangeRowsPerPage}
  />

codesnadbox: https://codesandbox.io/s/style-tablepagination-rows-per-page-menu-paper-forked-0qp0b?file=/demo.js