diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
index debdf06aa..33782fb4d 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
@@ -2,10 +2,13 @@ import { act, fireEvent, render } from '@testing-library/react';
 import { CamelRouteResource } from '../../../../models/camel';
 import { EntityType } from '../../../../models/camel/entities';
 import { VisualFlowsApi } from '../../../../models/visualization/flows/support/flows-visibility';
+import {
+  ActionConfirmationModalContext,
+  ActionConfirmationModalContextProvider,
+} from '../../../../providers/action-confirmation-modal.provider';
 import { VisibleFLowsContextResult } from '../../../../providers/visible-flows.provider';
 import { TestProvidersWrapper } from '../../../../stubs';
 import { FlowsList } from './FlowsList';
-import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
 
 describe('FlowsList.tsx', () => {
   let camelResource: CamelRouteResource;
@@ -117,7 +120,7 @@ describe('FlowsList.tsx', () => {
       </Provider>,
     );
 
-    act(() => {
+    await act(async () => {
       fireEvent.click(wrapper.getByTestId('delete-btn-route-1234'));
     });
 
@@ -127,6 +130,52 @@ describe('FlowsList.tsx', () => {
     });
   });
 
+  it('should delete a flow when clicking the delete icon and then clicking delete', async () => {
+    const { Provider } = TestProvidersWrapper({ camelResource });
+    const wrapper = render(
+      <Provider>
+        <ActionConfirmationModalContextProvider>
+          <FlowsList />
+        </ActionConfirmationModalContextProvider>
+      </Provider>,
+    );
+
+    await act(async () => {
+      const deleteBtn = wrapper.getByTestId('delete-btn-route-1234');
+      fireEvent.click(deleteBtn);
+    });
+
+    await act(async () => {
+      const actionConfirmationModalBtnConfirm = wrapper.getByTestId('action-confirmation-modal-btn-confirm');
+      fireEvent.click(actionConfirmationModalBtnConfirm);
+    });
+
+    expect(camelResource.getVisualEntities()).toHaveLength(1);
+  });
+
+  it('should not delete a flow when clicking the delete icon and then clicking cancel', async () => {
+    const { Provider } = TestProvidersWrapper({ camelResource });
+    const wrapper = render(
+      <Provider>
+        <ActionConfirmationModalContextProvider>
+          <FlowsList />
+        </ActionConfirmationModalContextProvider>
+      </Provider>,
+    );
+
+    await act(async () => {
+      const deleteBtn = wrapper.getByTestId('delete-btn-route-1234');
+      fireEvent.click(deleteBtn);
+    });
+
+    await act(async () => {
+      const actionConfirmationModalBtnCancel = wrapper.getByTestId('action-confirmation-modal-btn-cancel');
+      fireEvent.click(actionConfirmationModalBtnCancel);
+    });
+
+    expect(camelResource.getVisualEntities()).toHaveLength(2);
+  });
+
   it('should toggle the visibility of a flow clicking on the Eye icon', async () => {
     let resId = '';
     const visualFlowsApi = new VisualFlowsApi(jest.fn);
@@ -148,7 +197,7 @@ describe('FlowsList.tsx', () => {
 
     const toggleFlowId = await wrapper.findByTestId('toggle-btn-route-1234');
 
-    act(() => {
+    await act(async () => {
       fireEvent.click(toggleFlowId);
     });
 
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
index 6b440f740..7384fcda3 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
@@ -2,15 +2,18 @@ import { Button, Icon } from '@patternfly/react-core';
 import { EyeIcon, EyeSlashIcon, TrashIcon } from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { FunctionComponent, useCallback, useContext, useRef } from 'react';
+import { ValidationResult } from '../../../../models';
 import { BaseVisualCamelEntity } from '../../../../models/visualization/base-visual-entity';
+import {
+  ACTION_ID_CONFIRM,
+  ActionConfirmationModalContext,
+} from '../../../../providers/action-confirmation-modal.provider';
 import { EntitiesContext } from '../../../../providers/entities.provider';
-import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
 import { VisibleFlowsContext } from '../../../../providers/visible-flows.provider';
 import { InlineEdit } from '../../../InlineEdit';
+import { RouteIdValidator } from '../../../InlineEdit/routeIdValidator';
 import './FlowsList.scss';
 import { FlowsListEmptyState } from './FlowsListEmptyState';
-import { RouteIdValidator } from '../../../InlineEdit/routeIdValidator';
-import { ValidationResult } from '../../../../models';
 
 interface IFlowsList {
   onClose?: () => void;
@@ -110,7 +113,7 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
                     text: 'All steps will be lost.',
                   });
 
-                  if (!isDeleteConfirmed) return;
+                  if (isDeleteConfirmed !== ACTION_ID_CONFIRM) return;
 
                   camelResource.removeEntity(flow.id);
                   updateEntitiesFromCamelResource();