diff --git a/src/realm-roles/RealmRolesSection.tsx b/src/realm-roles/RealmRolesSection.tsx
index 26bdaa117d..dbddad6227 100644
--- a/src/realm-roles/RealmRolesSection.tsx
+++ b/src/realm-roles/RealmRolesSection.tsx
@@ -6,9 +6,9 @@ import { RolesList } from "./RolesList";
 
 export const RealmRolesSection = () => {
   const adminClient = useAdminClient();
-  const loader = async (to?: number, max?: number, search?: string) => {
+  const loader = async (first?: number, max?: number, search?: string) => {
     const params: { [name: string]: string | number } = {
-      to: to!,
+      first: first!,
       max: max!,
       search: search!,
     };
diff --git a/src/realm-roles/RolesList.tsx b/src/realm-roles/RolesList.tsx
index 3e447f41fb..2b0d2be105 100644
--- a/src/realm-roles/RolesList.tsx
+++ b/src/realm-roles/RolesList.tsx
@@ -13,13 +13,13 @@ import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { emptyFormatter, boolFormatter } from "../util";
 
 type RolesListProps = {
-  loader: (
+  paginated?: boolean;
+  parentRoleId?: string;
+  loader?: (
     first?: number,
     max?: number,
     search?: string
   ) => Promise<RoleRepresentation[]>;
-  paginated?: boolean;
-  parentRoleId?: string;
 };
 
 export const RolesList = ({
@@ -75,7 +75,7 @@ export const RolesList = ({
       <DeleteConfirm />
       <KeycloakDataTable
         key={selectedRole ? selectedRole.id : "roleList"}
-        loader={loader}
+        loader={loader!}
         ariaLabelKey="roles:roleList"
         searchPlaceholderKey="roles:searchFor"
         isPaginated={paginated}