diff --git a/x-pack/platform/packages/shared/index-management/index_management_shared_types/src/home_sections.ts b/x-pack/platform/packages/shared/index-management/index_management_shared_types/src/home_sections.ts
index 92c292e8e2642..f187b7d0ec439 100644
--- a/x-pack/platform/packages/shared/index-management/index_management_shared_types/src/home_sections.ts
+++ b/x-pack/platform/packages/shared/index-management/index_management_shared_types/src/home_sections.ts
@@ -32,7 +32,20 @@ export interface IndexDetailsTab {
   id: IndexDetailsTabId;
   // a text that is displayed on the tab label, usually a Formatted message component
   name: ReactNode;
-  // a function that renders the content of the tab
+  /**
+   * A function that renders the content of the tab.
+   *
+   * IMPORTANT: This expects an arrow function that returns JSX, NOT a component passed directly.
+   *
+   * @example
+   * // Correct - arrow function returning JSX:
+   * renderTabContent: ({ index, getUrlForApp }) => (
+   *   <MyTabComponent index={index} getUrlForApp={getUrlForApp} />
+   * )
+   *
+   * // Wrong - passing a component directly will break if it uses hooks:
+   * renderTabContent: MyTabComponent
+   */
   renderTabContent: (args: {
     index: Index;
     getUrlForApp: ApplicationStart['getUrlForApp'];
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx b/x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx
index 40622242e1b7a..6426e0b2416c5 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx
@@ -5,13 +5,12 @@
  * 2.0.
  */
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 import moment from 'moment-timezone';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
-import type { EuiBadgeProps, EuiThemeComputed } from '@elastic/eui';
+import type { EuiBadgeProps } from '@elastic/eui';
 import {
   EuiCodeBlock,
   EuiLink,
@@ -31,13 +30,13 @@ import type { IlmExplainLifecycleLifecycleExplainManaged } from '@elastic/elasti
 import type { Phase } from '../../../common/types';
 import { getPolicyEditPath } from '../../application/services/navigation';
 import { usePhaseColors } from '../../application/lib';
-interface Props {
+
+interface IndexLifecycleSummaryProps {
   index: Index;
   getUrlForApp: ApplicationStart['getUrlForApp'];
-  euiTheme: EuiThemeComputed;
 }
 
-export const IndexLifecycleSummary: FunctionComponent<Props> = ({ index, getUrlForApp }) => {
+export const IndexLifecycleSummary = ({ index, getUrlForApp }: IndexLifecycleSummaryProps) => {
   const { ilm: ilmData } = index;
   // only ILM managed indices render the ILM tab
   const ilm = ilmData as IlmExplainLifecycleLifecycleExplainManaged;
@@ -256,7 +255,9 @@ export const indexLifecycleTab: IndexDetailsTab = {
     />
   ),
   order: 50,
-  renderTabContent: IndexLifecycleSummary,
+  renderTabContent: ({ index, getUrlForApp }) => (
+    <IndexLifecycleSummary index={index} getUrlForApp={getUrlForApp} />
+  ),
   shouldRenderTab: ({ index }) => {
     return !!index.ilm && index.ilm.managed;
   },