diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.test.tsx
index 0863465833c0b..a87186847ef76 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.test.tsx
@@ -58,8 +58,7 @@ describe('connector_add_flyout', () => {
         }}
       >
         <ConnectorAddFlyout
-          addFlyoutVisible={true}
-          setAddFlyoutVisibility={() => {}}
+          onClose={() => {}}
           actionTypes={[
             {
               id: actionType.id,
@@ -100,8 +99,7 @@ describe('connector_add_flyout', () => {
         }}
       >
         <ConnectorAddFlyout
-          addFlyoutVisible={true}
-          setAddFlyoutVisibility={() => {}}
+          onClose={() => {}}
           actionTypes={[
             {
               id: actionType.id,
@@ -160,8 +158,7 @@ describe('connector_add_flyout', () => {
         }}
       >
         <ConnectorAddFlyout
-          addFlyoutVisible={true}
-          setAddFlyoutVisibility={() => {}}
+          onClose={() => {}}
           actionTypes={[
             {
               id: actionType.id,
@@ -208,8 +205,7 @@ describe('connector_add_flyout', () => {
         }}
       >
         <ConnectorAddFlyout
-          addFlyoutVisible={true}
-          setAddFlyoutVisibility={() => {}}
+          onClose={() => {}}
           actionTypes={[
             {
               id: actionType.id,
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx
index 2e222884dab50..00ff6fc132cdc 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx
@@ -32,15 +32,13 @@ import { useActionsConnectorsContext } from '../../context/actions_connectors_co
 import { VIEW_LICENSE_OPTIONS_LINK } from '../../../common/constants';
 
 export interface ConnectorAddFlyoutProps {
-  addFlyoutVisible: boolean;
-  setAddFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
   actionTypes?: ActionType[];
   onTestConnector?: (connector: ActionConnector) => void;
 }
 
 export const ConnectorAddFlyout = ({
-  addFlyoutVisible,
-  setAddFlyoutVisibility,
+  onClose,
   actionTypes,
   onTestConnector,
 }: ConnectorAddFlyoutProps) => {
@@ -74,17 +72,13 @@ export const ConnectorAddFlyout = ({
   const [isSaving, setIsSaving] = useState<boolean>(false);
 
   const closeFlyout = useCallback(() => {
-    setAddFlyoutVisibility(false);
     setActionType(undefined);
     setConnector(initialConnector);
-  }, [setAddFlyoutVisibility, initialConnector]);
+    onClose();
+  }, [onClose, initialConnector]);
 
   const canSave = hasSaveActionsCapability(capabilities);
 
-  if (!addFlyoutVisible) {
-    return null;
-  }
-
   function onActionTypeChange(newActionType: ActionType) {
     setActionType(newActionType);
     setActionProperty('actionTypeId', newActionType.id);
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.test.tsx
index 0c2f4df0ca52b..cc56f1c677a8e 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.test.tsx
@@ -84,11 +84,7 @@ describe('connector_edit_flyout', () => {
             docLinks: deps.docLinks,
           }}
         >
-          <ConnectorEditFlyout
-            initialConnector={connector}
-            editFlyoutVisible={true}
-            setEditFlyoutVisibility={(state) => {}}
-          />
+          <ConnectorEditFlyout initialConnector={connector} onClose={() => {}} />
         </ActionsConnectorsContextProvider>
       </AppContextProvider>
     );
@@ -141,11 +137,7 @@ describe('connector_edit_flyout', () => {
             docLinks: deps.docLinks,
           }}
         >
-          <ConnectorEditFlyout
-            initialConnector={connector}
-            editFlyoutVisible={true}
-            setEditFlyoutVisibility={(state) => {}}
-          />
+          <ConnectorEditFlyout initialConnector={connector} onClose={() => {}} />
         </ActionsConnectorsContextProvider>
       </AppContextProvider>
     );
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx
index e89eb8c95fbab..d81f30e4f3647 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx
@@ -39,8 +39,7 @@ import './connector_edit_flyout.scss';
 
 export interface ConnectorEditProps {
   initialConnector: ActionConnector;
-  editFlyoutVisible: boolean;
-  setEditFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
   tab?: EditConectorTabs;
 }
 
@@ -51,8 +50,7 @@ export enum EditConectorTabs {
 
 export const ConnectorEditFlyout = ({
   initialConnector,
-  editFlyoutVisible,
-  setEditFlyoutVisibility,
+  onClose,
   tab = EditConectorTabs.Configuration,
 }: ConnectorEditProps) => {
   const {
@@ -86,16 +84,12 @@ export const ConnectorEditFlyout = ({
   const [isExecutingAction, setIsExecutinAction] = useState<boolean>(false);
 
   const closeFlyout = useCallback(() => {
-    setEditFlyoutVisibility(false);
     setConnector('connector', { ...initialConnector, secrets: {} });
     setHasChanges(false);
     setTestExecutionResult(none);
+    onClose();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setEditFlyoutVisibility]);
-
-  if (!editFlyoutVisible) {
-    return null;
-  }
+  }, [onClose]);
 
   const actionTypeModel = actionTypeRegistry.get(connector.actionTypeId);
   const errorsInConnectorConfig = (!connector.isPreconfigured
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
index da833c3495b4a..ff5585cf04dbe 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
@@ -20,6 +20,7 @@ import {
   EuiEmptyPrompt,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { omit } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useAppDependencies } from '../../../app_context';
 import { loadAllActions, loadActionTypes, deleteActions } from '../../../lib/action_connector_api';
@@ -56,7 +57,6 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = useState<ActionConnectorTableItem[]>([]);
   const [isLoadingActionTypes, setIsLoadingActionTypes] = useState<boolean>(false);
   const [isLoadingActions, setIsLoadingActions] = useState<boolean>(false);
-  const [editFlyoutVisible, setEditFlyoutVisibility] = useState<boolean>(false);
   const [addFlyoutVisible, setAddFlyoutVisibility] = useState<boolean>(false);
   const [editConnectorProps, setEditConnectorProps] = useState<{
     initialConnector?: ActionConnector;
@@ -134,7 +134,6 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
 
   async function editItem(actionConnector: ActionConnector, tab: EditConectorTabs) {
     setEditConnectorProps({ initialConnector: actionConnector, tab });
-    setEditFlyoutVisibility(true);
   }
 
   const actionsTableColumns = [
@@ -367,11 +366,14 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
           docLinks,
         }}
       >
-        <ConnectorAddFlyout
-          addFlyoutVisible={addFlyoutVisible}
-          setAddFlyoutVisibility={setAddFlyoutVisibility}
-          onTestConnector={(connector) => editItem(connector, EditConectorTabs.Test)}
-        />
+        {addFlyoutVisible ? (
+          <ConnectorAddFlyout
+            onClose={() => {
+              setAddFlyoutVisibility(false);
+            }}
+            onTestConnector={(connector) => editItem(connector, EditConectorTabs.Test)}
+          />
+        ) : null}
         {editConnectorProps.initialConnector ? (
           <ConnectorEditFlyout
             key={`${editConnectorProps.initialConnector.id}${
@@ -379,8 +381,9 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
             }`}
             initialConnector={editConnectorProps.initialConnector}
             tab={editConnectorProps.tab}
-            editFlyoutVisible={editFlyoutVisible}
-            setEditFlyoutVisibility={setEditFlyoutVisibility}
+            onClose={() => {
+              setEditConnectorProps(omit(editConnectorProps, 'initialConnector'));
+            }}
           />
         ) : null}
       </ActionsConnectorsContextProvider>