TypeError: props.handlePagination не является функцией

Question

Я пытаюсь передать функцию дочернему компоненту в функциональном компоненте, и каждый раз получаю сообщение об ошибке: это не функция.

Администратор. js

  const handlePagination = (event, newPage) => {
    console.log("newPage", newPage);
    event.preventDefault();
    console.log("newPage", newPage);
    props.getUserLoadSiteManagers(
      props.accessToken,
      menuValues,
      filterText,
      newPage,
      20
    );
  };

   {TableData && TableData.rows && TableData.rows.length > 0 ? (
        <Table
          pagination={pagination}
          handlePagination={handlePagination}
          _handleCheckbox={_handleCheckbox}
          _handleUserCheckBox={_handleUserCheckBox}
          data={TableData}
          isItemSelected
          numSelected={() => numSelected(numSelected)}
          onClick={SelectedId(SelectedId)}
        />
      ) : (
        <h3>No Data Available</h3>
      )}

Таблица. js

 <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={props.data.rows.length}
          rowsPerPage={rowsPerPage}
          page={props.pagination.number}
          backIconButtonProps={{
            "aria-label": "Previous Page",
          }}
          nextIconButtonProps={{
            "aria-label": "Next Page",
          }}
          onChangePage={() => props.handlePagination()}
          onChangeRowsPerPage={handleChangeRowsPerPage}
        />

все стойки

Таблица. js

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <EnhancedTableToolbar numSelected={selected.length} data={props.data} />
        <div className={classes.tableWrapper}>
          <Table
            className={classes.table}
            aria-labelledby="tableTitle"
            size={dense ? "small" : "medium"}
          >

            {/*//! Table Body Component */}
            <TableBody>

                    <TableRow
                      hover
                      onClick={(event) =>
                        handleClick(event, row.name, row.userId)
                      }
                      role="checkbox"
                      aria-checked={isItemSelected}
                      tabIndex={-1}
                      key={props.data.rows.name}
                      selected={isItemSelected}
                    >
                      <TableCell padding="checkbox">
                        <Checkbox
                          checked={isItemSelected}
                          inputProps={{ "aria-labelledby": labelId }}
                        />
                      </TableCell>
                      {rowData(row)}
                    </TableRow>
                  );
                })}
              {emptyRows > 0 && (
                <TableRow style={{ height: 49 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={props.data.rows.length}
          rowsPerPage={rowsPerPage}
          page={props.pagination.number}
          backIconButtonProps={{
            "aria-label": "Previous Page",
          }}
          nextIconButtonProps={{
            "aria-label": "Next Page",
          }}
          onChangePage={() => props.handlePagination()}
          onChangeRowsPerPage={handleChangeRowsPerPage}
        />
      </Paper>
    </div>
  );
}

Мне очень нужна помощь с этим. Это расстраивает.