diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx
index 4b19b6f7ae5c35..3b9245eebffbdf 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx
@@ -3,22 +3,30 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useEffect } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 
+import { GlobalFlyout } from '../../shared_imports';
 import { useMappingsState, useDispatch } from '../../mappings_state_context';
 import { deNormalize } from '../../lib';
-import { EditFieldContainer } from './fields';
+import { EditFieldContainer, EditFieldContainerProps, defaultFlyoutProps } from './fields';
 import { DocumentFieldsHeader } from './document_fields_header';
 import { DocumentFieldsJsonEditor } from './fields_json_editor';
 import { DocumentFieldsTreeEditor } from './fields_tree_editor';
 import { SearchResult } from './search_fields';
 
+const { useGlobalFlyout } = GlobalFlyout;
+
 export const DocumentFields = React.memo(() => {
   const { fields, search, documentFields } = useMappingsState();
   const dispatch = useDispatch();
+  const {
+    addContent: addContentToGlobalFlyout,
+    removeContent: removeContentFromGlobalFlyout,
+  } = useGlobalFlyout();
 
   const { editor: editorType } = documentFields;
+  const isEditing = documentFields.status === 'editingField';
 
   const jsonEditorDefaultValue = useMemo(() => {
     if (editorType === 'json') {
@@ -40,6 +48,38 @@ export const DocumentFields = React.memo(() => {
     [dispatch]
   );
 
+  const exitEdit = useCallback(() => {
+    dispatch({ type: 'documentField.changeStatus', value: 'idle' });
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isEditing) {
+      // Open the flyout with the <EditField /> content
+      addContentToGlobalFlyout<EditFieldContainerProps>({
+        id: 'mappingsEditField',
+        Component: EditFieldContainer,
+        props: { exitEdit },
+        flyoutProps: { ...defaultFlyoutProps, onClose: exitEdit },
+        cleanUpFunc: exitEdit,
+      });
+    }
+  }, [isEditing, addContentToGlobalFlyout, fields.byId, exitEdit]);
+
+  useEffect(() => {
+    if (!isEditing) {
+      removeContentFromGlobalFlyout('mappingsEditField');
+    }
+  }, [isEditing, removeContentFromGlobalFlyout]);
+
+  useEffect(() => {
+    return () => {
+      if (isEditing) {
+        // When the component unmounts, exit edit mode.
+        exitEdit();
+      }
+    };
+  }, [isEditing, exitEdit]);
+
   const searchTerm = search.term.trim();
 
   return (
@@ -51,7 +91,6 @@ export const DocumentFields = React.memo(() => {
       ) : (
         editor
       )}
-      <EditFieldContainer />
     </div>
   );
 });
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
index a9bbf008e51295..95575124b6abdd 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
@@ -43,13 +43,6 @@ export interface Props {
   updateField: UpdateFieldFunc;
 }
 
-export const defaultFlyoutProps = {
-  'data-test-subj': 'mappingsEditorFieldEdit',
-  'aria-labelledby': 'mappingsEditorFieldEditTitle',
-  className: 'mappingsEditor__editField',
-  maxWidth: 720,
-};
-
 // The default FormWrapper is the <EuiForm />, which wrapps the form with
 // a <div>. We can't have a div as first child of the Flyout as it breaks
 // the height calculaction and does not render the footer position correctly.
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
index 4996f59105c046..1f11bac568859d 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
@@ -3,31 +3,35 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useEffect, useCallback, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
-import { useForm, GlobalFlyout } from '../../../../shared_imports';
+import { useForm } from '../../../../shared_imports';
 import { useDispatch, useMappingsState } from '../../../../mappings_state_context';
 import { Field } from '../../../../types';
 import { fieldSerializer, fieldDeserializer } from '../../../../lib';
 import { ModalConfirmationDeleteFields } from '../modal_confirmation_delete_fields';
-import { EditField, defaultFlyoutProps, Props as EditFieldProps } from './edit_field';
+import { EditField } from './edit_field';
 import { useUpdateField } from './use_update_field';
 
-const { useGlobalFlyout } = GlobalFlyout;
+export const defaultFlyoutProps = {
+  'data-test-subj': 'mappingsEditorFieldEdit',
+  'aria-labelledby': 'mappingsEditorFieldEditTitle',
+  className: 'mappingsEditor__editField',
+  maxWidth: 720,
+};
 
-export const EditFieldContainer = React.memo(() => {
+export interface Props {
+  exitEdit: () => void;
+}
+
+export const EditFieldContainer = React.memo(({ exitEdit }: Props) => {
   const { fields, documentFields } = useMappingsState();
   const dispatch = useDispatch();
-  const {
-    addContent: addContentToGlobalFlyout,
-    removeContent: removeContentFromGlobalFlyout,
-  } = useGlobalFlyout();
   const { updateField, modal } = useUpdateField();
 
   const { status, fieldToEdit } = documentFields;
   const isEditing = status === 'editingField';
-
-  const field = isEditing ? fields.byId[fieldToEdit!] : undefined;
+  const field = fields.byId[fieldToEdit!];
 
   const formDefaultValue = useMemo(() => {
     return { ...field?.source };
@@ -38,6 +42,7 @@ export const EditFieldContainer = React.memo(() => {
     serializer: fieldSerializer,
     deserializer: fieldDeserializer,
     options: { stripEmptyFields: false },
+    id: 'edit-field',
   });
 
   const { subscribe } = form;
@@ -50,52 +55,24 @@ export const EditFieldContainer = React.memo(() => {
     return subscription.unsubscribe;
   }, [subscribe, dispatch]);
 
-  const exitEdit = useCallback(() => {
-    dispatch({ type: 'documentField.changeStatus', value: 'idle' });
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (isEditing) {
-      // Open the flyout with the <EditField /> content
-      addContentToGlobalFlyout<EditFieldProps>({
-        id: 'mappingsEditField',
-        Component: EditField,
-        props: {
-          form,
-          field: field!,
-          exitEdit,
-          allFields: fields.byId,
-          updateField,
-        },
-        flyoutProps: { ...defaultFlyoutProps, onClose: exitEdit },
-        cleanUpFunc: exitEdit,
-      });
-    }
-  }, [
-    isEditing,
-    field,
-    form,
-    addContentToGlobalFlyout,
-    fields.byId,
-    fieldToEdit,
-    exitEdit,
-    updateField,
-  ]);
+  const renderModal = () => {
+    return modal.isOpen ? <ModalConfirmationDeleteFields {...modal.props} /> : null;
+  };
 
-  useEffect(() => {
-    if (!isEditing) {
-      removeContentFromGlobalFlyout('mappingsEditField');
-    }
-  }, [isEditing, removeContentFromGlobalFlyout]);
-
-  useEffect(() => {
-    return () => {
-      if (isEditing) {
-        // When the component unmounts, exit edit mode.
-        exitEdit();
-      }
-    };
-  }, [isEditing, exitEdit]);
+  if (!isEditing) {
+    return null;
+  }
 
-  return modal.isOpen ? <ModalConfirmationDeleteFields {...modal.props} /> : null;
+  return (
+    <>
+      <EditField
+        form={form}
+        field={field}
+        allFields={fields.byId}
+        exitEdit={exitEdit}
+        updateField={updateField}
+      />
+      {renderModal()}
+    </>
+  );
 });
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/index.ts
index ff74cabca75183..ccc04e544372c2 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/index.ts
@@ -4,7 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export * from './edit_field_container';
+export {
+  EditFieldContainer,
+  defaultFlyoutProps,
+  Props as EditFieldContainerProps,
+} from './edit_field_container';
 
 export * from './basic_parameters_section';