want to maintain the sending order on every page in React pagination

Please check the programme here. I have pagination data with an asending order. On the 1st page, all the data is asending, but on the next page, asending data is not shown, so on every page, how do I show the asending data in pagination? For example, on the 1st page, data is showing like 1 2 3 in the second, or the rest of the pages id should be asending like 1 2 3 but when you go to the next page, it shows 2 3 1 so how do I solve that?

import Pagination from "@mui/material/Pagination";
import { useState } from "react";

export default function App() {
  const employees = [
    { id: 2, name: "Bob", country: "Belgium" },
    { id: 3, name: "Carl", country: "Canada" },
    { id: 1, name: "Alice", country: "Austria" },
    { id: 2, name: "Mike", country: "USA" },
    { id: 3, name: "Sam", country: "India" },
    { id: 1, name: "jake", country: "Japan" }
  ];
  const [emp] = useState(employees);
  const rowsPerPage = 3;
  const [page, setPage] = useState(1);
  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };
  const sortTypes = {
    assending: {
      class: "assending",
      fn: [...emp].sort((a, b) => (a.name > b.name ? 1 : -1)) 
    }
  };
  const startIndex = (page - 1) * rowsPerPage;
  const endIndex = startIndex + rowsPerPage;
  const displayedRows = sortTypes.assending.fn.slice(startIndex, endIndex);

 
  return (
    <>
      <table>
        <thead>
          <th>ID</th>
          <th>Name</th>
          <th>Country</th>
        </thead>
        {displayedRows.map((data, i) => (
          <tbody key={i}>
            <tr>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.country}</td>
            </tr>
          </tbody>
        ))}
      </table>
      <Pagination
        count={Math.ceil(emp.length / rowsPerPage)}
        color="primary"
        variant="outlined"
        page={page}
        onChange={handleChangePage}
      />
    </>
  );
}