diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx
index d410e8ee9d43e..bcd9026992d15 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx
@@ -694,6 +694,42 @@ describe('AlertsTable', () => {
 
         expect(await screen.findByTestId(TEST_ID.FIELD_BROWSER_CUSTOM_CREATE_BTN)).toBeVisible();
       });
+
+      it('The column state is synced correctly between the column selector and the field selector', async () => {
+        const columnToHide = tableProps.columns[0];
+        render(
+          <AlertsTableWithProviders
+            {...tableProps}
+            toolbarVisibility={{
+              showColumnSelector: true,
+            }}
+            initialBulkActionsState={{
+              ...defaultBulkActionsState,
+              rowSelection: new Map(),
+            }}
+          />
+        );
+
+        const fieldBrowserBtn = await screen.findByTestId(TEST_ID.FIELD_BROWSER_BTN);
+        const columnSelectorBtn = await screen.findByTestId('dataGridColumnSelectorButton');
+
+        // Open the column visibility selector and hide the column
+        fireEvent.click(columnSelectorBtn);
+        const columnVisibilityToggle = await screen.findByTestId(
+          `dataGridColumnSelectorToggleColumnVisibility-${columnToHide.id}`
+        );
+        fireEvent.click(columnVisibilityToggle);
+
+        // Open the field browser
+        fireEvent.click(fieldBrowserBtn);
+        expect(await screen.findByTestId(TEST_ID.FIELD_BROWSER)).toBeVisible();
+
+        // The column should be checked in the field browser, independent of its visibility status
+        const columnCheckbox: HTMLInputElement = await screen.findByTestId(
+          `field-${columnToHide.id}-checkbox`
+        );
+        expect(columnCheckbox).toBeChecked();
+      });
     });
 
     describe('cases column', () => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
index 617b0f9c70a0a..61c65eded27b5 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
@@ -413,7 +413,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = memo((props: Aler
       rowSelection: bulkActionsState.rowSelection,
       alerts,
       isLoading,
-      columnIds: visibleColumns,
+      columnIds: columns.map((column) => column.id),
       onToggleColumn,
       onResetColumns,
       browserFields,
@@ -431,7 +431,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = memo((props: Aler
     alertsCount,
     bulkActionsState,
     isLoading,
-    visibleColumns,
+    columns,
     onToggleColumn,
     onResetColumns,
     browserFields,