ReactでMaterial UIライブラリにあるページネーションをテーブルに適用させたい

現在、Material UIライブラリのドキュメントに載っているページネーションを使ったテーブルを作成したいと考えています。
具体的には、https://material-ui.com/components/tables/ に載っているCustom pagination actionsを実装したいです。
下記の画像のようなものです。

PagenationTableComponent.jsにCheckList.jsにあるようにaxiosで渡ってきたjsonデータを表示したいのですが、下記のようなエラーが出てしまいます。
このrows.sliceが機能していないというのがどうすれば修正できるかご教示お願いします。
jsonデータは以下のようなものです。
[{"listNo":1,
"saiyouDate":"2008-10-06 ",
"softwareName":"Symantec Endpoint Protection",
"version":"‐",
"shubetu":"有償",
"licenseManage":"○",
"youto":"ウイルス対策",
"bikou":"使用する場合はシステム管理まで連絡が必要",
"authorizer":"山田",
"approvalDate":"2008-10-06 ",
"url":"https://jp.broadcom.com/products/cyber-security/endpoint/end-user"}]

TypeError: rows.slice is not a function
CustomPaginationActionsTable
C:/workspace/spring-backend-3/frontend/src/component/PagenationTableComponent.js:117
114 | return (
115 |
116 |

117 |
| ^ 118 | {(rowsPerPage > 0
119 | ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
120 | : rows
View compiled
▶ 17 stack frames were collapsed.

PagenationTableComponent.js

js
1import React from 'react';
2import PropTypes from 'prop-types';
3import { makeStyles, useTheme } from '@material-ui/core/styles';
4import Table from '@material-ui/core/Table';
5import TableBody from '@material-ui/core/TableBody';
6import TableCell from '@material-ui/core/TableCell';
7import TableContainer from '@material-ui/core/TableContainer';
8import TableFooter from '@material-ui/core/TableFooter';
9import TablePagination from '@material-ui/core/TablePagination';
10import TableRow from '@material-ui/core/TableRow';
11import Paper from '@material-ui/core/Paper';
12import IconButton from '@material-ui/core/IconButton';
13import FirstPageIcon from '@material-ui/icons/FirstPage';
14import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
15import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
16import LastPageIcon from '@material-ui/icons/LastPage';
17import CheckListService from '../services/CheckList';
18
19const useStyles1 = makeStyles((theme) => ({
20    root: {
21        flexShrink: 0,
22        marginLeft: theme.spacing(2.5),
23    },
24}));
25
26function TablePaginationActions(props) {
27    const classes = useStyles1();
28    const theme = useTheme();
29    const { count, page, rowsPerPage, onChangePage } = props;
30
31    const handleFirstPageButtonClick = (event) => {
32        onChangePage(event, 0);
33    };
34
35    const handleBackButtonClick = (event) => {
36        onChangePage(event, page - 1);
37    };
38
39    const handleNextButtonClick = (event) => {
40        onChangePage(event, page + 1);
41    };
42
43    const handleLastPageButtonClick = (event) => {
44        onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
45    };
46
47    return (
48        <div className={classes.root}>
49            <IconButton
50                onClick={handleFirstPageButtonClick}
51                disabled={page === 0}
52                aria-label="first page"
53            >
54                {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
55            </IconButton>
56            <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
57                {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
58            </IconButton>
59            <IconButton
60                onClick={handleNextButtonClick}
61                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
62                aria-label="next page"
63            >
64                {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
65            </IconButton>
66            <IconButton
67                onClick={handleLastPageButtonClick}
68                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
69                aria-label="last page"
70            >
71                {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
72            </IconButton>
73        </div>
74    );
75}
76
77TablePaginationActions.propTypes = {
78    count: PropTypes.number.isRequired,
79    onChangePage: PropTypes.func.isRequired,
80    page: PropTypes.number.isRequired,
81    rowsPerPage: PropTypes.number.isRequired,
82};
83
84let rows = [];
85rows = CheckListService.getList().then((response) => {
86    return response.data
87
88});
89
90
91
92const useStyles2 = makeStyles({
93    table: {
94        minWidth: 500,
95    },
96});
97
98export default function CustomPaginationActionsTable() {
99    const classes = useStyles2();
100    const [page, setPage] = React.useState(0);
101    const [rowsPerPage, setRowsPerPage] = React.useState(5);
102
103    const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
104
105    const handleChangePage = (event, newPage) => {
106        setPage(newPage);
107    };
108
109    const handleChangeRowsPerPage = (event) => {
110        setRowsPerPage(parseInt(event.target.value, 10));
111        setPage(0);
112    };
113
114    return (
115        <TableContainer component={Paper}>
116            <Table className={classes.table} aria-label="custom pagination table">
117                <TableBody>
118                    {(rowsPerPage > 0
119                        ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
120                        : rows
121                    ).map((row) => (
122                        <TableRow key={row.listNo}>
123                            <TableCell component="th" scope="row">
124                                {row.listNo}
125                            </TableCell>
126                            <TableCell style={{ width: 160 }} align="right">
127                                {row.saiyouDate}
128                            </TableCell>
129                            <TableCell style={{ width: 160 }} align="right">
130                                {row.softwareName}
131                            </TableCell>
132                        </TableRow>
133                    ))}
134
135                    {emptyRows > 0 && (
136                        <TableRow style={{ height: 53 * emptyRows }}>
137                            <TableCell colSpan={6} />
138                        </TableRow>
139                    )}
140                </TableBody>
141                <TableFooter>
142                    <TableRow>
143                        <TablePagination
144                            rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
145                            colSpan={3}
146                            count={rows.length}
147                            rowsPerPage={rowsPerPage}
148                            page={page}
149                            SelectProps={{
150                                inputProps: { 'aria-label': 'rows per page' },
151                                native: true,
152                            }}
153                            onChangePage={handleChangePage}
154                            onChangeRowsPerPage={handleChangeRowsPerPage}
155                            ActionsComponent={TablePaginationActions}
156                        />
157                    </TableRow>
158                </TableFooter>
159            </Table>
160        </TableContainer>
161    );
162}
163
164

CheckList.js

js
1import axios from 'axios'
2
3const CHECKLIST_REST_API_URL = 'http://localhost:8080/api/users';
4
5class CheckListService {
6
7    getList() {
8        return axios.get(CHECKLIST_REST_API_URL);
9    }
10}
11
12
13export default new CheckListService();