diff --git a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
index b5905ec147960..ed733ac8d24b9 100644
--- a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
+++ b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
@@ -74,7 +74,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
     readOnly: false,
   };
 
-  private tableRef: React.RefObject<EuiInMemoryTable<RoleMapping>>;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -85,7 +84,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
       selectedItems: [],
       error: undefined,
     };
-    this.tableRef = React.createRef();
   }
 
   public componentDidMount() {
@@ -226,6 +224,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
           selectedItems: newSelectedItems,
         });
       },
+      selected: selectedItems,
     };
 
     const search = {
@@ -237,13 +236,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
           {(deleteRoleMappingsPrompt) => {
             return (
               <EuiButton
-                onClick={() =>
-                  deleteRoleMappingsPrompt(
-                    selectedItems,
-                    this.onRoleMappingsDeleted,
-                    this.onRoleMappingsDeleteCancel
-                  )
-                }
+                onClick={() => deleteRoleMappingsPrompt(selectedItems, this.onRoleMappingsDeleted)}
                 color="danger"
                 data-test-subj="bulkDeleteActionButton"
               >
@@ -298,7 +291,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
                 loading={loadState === 'loadingTable'}
                 message={message}
                 isSelectable={true}
-                ref={this.tableRef}
                 rowProps={() => {
                   return {
                     'data-test-subj': 'roleMappingRow',
@@ -499,10 +491,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
     }
   };
 
-  private onRoleMappingsDeleteCancel = () => {
-    this.tableRef.current?.setSelection([]);
-  };
-
   private async checkPrivileges() {
     try {
       const { canManageRoleMappings, hasCompatibleRealms } =
diff --git a/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx b/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx
index 6a6433038d635..1da786c7e6b70 100644
--- a/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx
+++ b/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx
@@ -68,7 +68,6 @@ export class RolesGridPage extends Component<Props, State> {
     readOnly: false,
   };
 
-  private tableRef: React.RefObject<EuiInMemoryTable<Role>>;
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -80,7 +79,6 @@ export class RolesGridPage extends Component<Props, State> {
       permissionDenied: false,
       includeReservedRoles: true,
     };
-    this.tableRef = React.createRef();
   }
 
   public componentDidMount() {
@@ -156,6 +154,7 @@ export class RolesGridPage extends Component<Props, State> {
                     selectableMessage: (selectable: boolean) =>
                       !selectable ? 'Role is reserved' : '',
                     onSelectionChange: (selection: Role[]) => this.setState({ selection }),
+                    selected: this.state.selection,
                   }
             }
             pagination={{
@@ -188,7 +187,6 @@ export class RolesGridPage extends Component<Props, State> {
                 direction: 'asc',
               },
             }}
-            ref={this.tableRef}
             rowProps={(role: Role) => {
               return {
                 'data-test-subj': `roleRow`,
@@ -484,7 +482,6 @@ export class RolesGridPage extends Component<Props, State> {
     );
   }
   private onCancelDelete = () => {
-    this.setState({ showDeleteConfirmation: false, selection: [] });
-    this.tableRef.current?.setSelection([]);
+    this.setState({ showDeleteConfirmation: false });
   };
 }