You can look at how the rows get sorted and filtered inside the TableBody below, just take the part where it filter to the handleSelectAllClick function:

<TableBody>
  {/* if you don't need to support IE11, you can replace the `stableSort` call with:
      rows.slice().sort(getComparator(order, orderBy)) */}
  {stableSort(rows, getComparator(order, orderBy))
    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
    .map((row, index) => {
      return (...);
    }

const handleSelectAllClick = (event) => {
  if (event.target.checked) {
    const newSelecteds = stableSort(rows, getComparator(order, orderBy))
      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
      .map((n) => n.name);

    setSelected(newSelecteds);
    return;
  }
  setSelected([]);
};

At this point, it's almost working except that you can't clear all the selection because the Checkbox's state inside the table header depends on the number of rows selected, it can't be unselected because you only select the rows in 1 page, not all rows. You can fix it by taking control of the Checkbox and make it always change state between the 2 options (select/unselect):

const [value, setValue] = React.useState(false);

<Checkbox
  color="primary"
  // indeterminate={numSelected > 0 && numSelected < rowCount}
  checked={value}
  onChange={(_, value) => {
    setValue(value);
    onSelectAllClick(_, value);
  }}
  inputProps={{
    "aria-label": "select all desserts"
  }}
/>

Editing the handleSelectAllClick to the following should work:

 const handleSelectAllClick = (event) => {
    if (event.target.checked) {
      const newSelecteds = stableSort(rows, getComparator(order, orderBy))
      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
      .map((n)=>n.name) 

      setSelected(newSelecteds);
      return;
    }
    setSelected([]);
  };