diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js
index d46055b96d..2396188c00 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js
@@ -14,7 +14,6 @@ import { Loader } from '@strapi/design-system/Loader';
 import Trash from '@strapi/icons/Trash';
 import ArrowDown from '@strapi/icons/ArrowDown';
 import ArrowUp from '@strapi/icons/ArrowUp';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import FieldComponent from '../../../FieldComponent';
@@ -60,21 +59,12 @@ const Component = ({
 }) => {
   const { formatMessage } = useIntl();
   const { getComponentLayout } = useContentTypeLayout();
-  const { modifiedData } = useCMEditViewDataManager();
   const componentLayoutData = useMemo(() => {
     const layout = getComponentLayout(componentUid);
 
-    console.log('DZone/Component componentLayoutData', {
-      componentUid,
-      layout,
-      name,
-      index,
-      modifiedData,
-    });
-
     return layout;
-  }, [componentUid, getComponentLayout, index, name, modifiedData]);
-  const mainValue = useMainValue(componentLayoutData, `${name}.${index}`);
+  }, [componentUid, getComponentLayout]);
+  const mainValue = useMainValue(componentLayoutData, [name, index]);
   const { icon, friendlyName } = useMemo(() => {
     const {
       info: { icon, displayName },
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/util.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/util.js
index 202f957dcb..a4930793af 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/util.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/util.js
@@ -2,13 +2,15 @@ import { useMemo } from 'react';
 import { get, toString } from 'lodash';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
-function useMainValue(schema, componentFieldName) {
+function useMainValue(schema, componentFieldPath) {
   const { modifiedData } = useCMEditViewDataManager();
 
   const mainField = useMemo(() => get(schema, ['settings', 'mainField'], 'id'), [schema]);
-  const displayedValue = toString(
-    get(modifiedData, [...componentFieldName.split('.'), mainField], '')
-  );
+  let displayedValue = toString(get(modifiedData, [...componentFieldPath, mainField], ''));
+
+  if (displayedValue.length > 50) {
+    displayedValue = `${displayedValue.substring(0, 50)}...`;
+  }
 
   return displayedValue;
 }