diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
index 7bd6ebb9a39d..0c4dd379bcd0 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useContext } from 'react';
+import React, { FunctionComponent, useContext } from 'react';
 import classNames from 'classnames';
 
 import { useEuiTheme } from '../../services';
@@ -30,7 +30,7 @@ import {
  * Note: They are not intended to be used standalone outside of EuiCollapsibleNav
  */
 
-export const EuiCollapsibleNavBody: EuiFlyoutBodyProps = ({
+export const EuiCollapsibleNavBody: FunctionComponent<EuiFlyoutBodyProps> = ({
   className,
   ...props
 }) => {
@@ -55,10 +55,9 @@ export const EuiCollapsibleNavBody: EuiFlyoutBodyProps = ({
   );
 };
 
-export const EuiCollapsibleNavFooter: EuiFlyoutFooterProps = ({
-  className,
-  ...props
-}) => {
+export const EuiCollapsibleNavFooter: FunctionComponent<
+  EuiFlyoutFooterProps
+> = ({ className, ...props }) => {
   const classes = classNames('euiCollapsibleNav__footer', className);
 
   const euiTheme = useEuiTheme();
diff --git a/src/components/flyout/flyout_body.tsx b/src/components/flyout/flyout_body.tsx
index 026384f328fc..2bc20c739655 100644
--- a/src/components/flyout/flyout_body.tsx
+++ b/src/components/flyout/flyout_body.tsx
@@ -12,27 +12,25 @@ import { CommonProps } from '../common';
 import { useEuiTheme } from '../../services';
 import { euiFlyoutBodyStyles } from './flyout_body.styles';
 
-export type EuiFlyoutBodyProps = FunctionComponent<
-  HTMLAttributes<HTMLDivElement> &
-    CommonProps & {
-      /**
-       * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.
-       */
-      banner?: ReactNode;
-      /**
-       * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
-       * to allow keyboard users to scroll the region via arrow keys.
-       *
-       * By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`.
-       * If you know your flyout body content already contains focusable children
-       * that satisfy keyboard accessibility requirements, you can use this prop
-       * to override this default.
-       */
-      scrollableTabIndex?: number;
-    }
->;
+export type EuiFlyoutBodyProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    /**
+     * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.
+     */
+    banner?: ReactNode;
+    /**
+     * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
+     * to allow keyboard users to scroll the region via arrow keys.
+     *
+     * By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`.
+     * If you know your flyout body content already contains focusable children
+     * that satisfy keyboard accessibility requirements, you can use this prop
+     * to override this default.
+     */
+    scrollableTabIndex?: number;
+  };
 
-export const EuiFlyoutBody: EuiFlyoutBodyProps = ({
+export const EuiFlyoutBody: FunctionComponent<EuiFlyoutBodyProps> = ({
   children,
   className,
   banner,
diff --git a/src/components/flyout/flyout_footer.tsx b/src/components/flyout/flyout_footer.tsx
index 9dcf4ff8690b..31605055960f 100644
--- a/src/components/flyout/flyout_footer.tsx
+++ b/src/components/flyout/flyout_footer.tsx
@@ -12,11 +12,9 @@ import { CommonProps } from '../common';
 import { useEuiTheme } from '../../services';
 import { euiFlyoutFooterStyles } from './flyout_footer.styles';
 
-export type EuiFlyoutFooterProps = FunctionComponent<
-  HTMLAttributes<HTMLDivElement> & CommonProps
->;
+export type EuiFlyoutFooterProps = HTMLAttributes<HTMLDivElement> & CommonProps;
 
-export const EuiFlyoutFooter: EuiFlyoutFooterProps = ({
+export const EuiFlyoutFooter: FunctionComponent<EuiFlyoutFooterProps> = ({
   children,
   className,
   ...rest
diff --git a/src/components/flyout/flyout_header.tsx b/src/components/flyout/flyout_header.tsx
index 9323b6e1ff73..6912f938607e 100644
--- a/src/components/flyout/flyout_header.tsx
+++ b/src/components/flyout/flyout_header.tsx
@@ -12,14 +12,12 @@ import { CommonProps } from '../common';
 import { useEuiTheme } from '../../services';
 import { euiFlyoutHeaderStyles } from './flyout_header.styles';
 
-export type EuiFlyoutHeaderProps = FunctionComponent<
-  HTMLAttributes<HTMLDivElement> &
-    CommonProps & {
-      hasBorder?: boolean;
-    }
->;
+export type EuiFlyoutHeaderProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    hasBorder?: boolean;
+  };
 
-export const EuiFlyoutHeader: EuiFlyoutHeaderProps = ({
+export const EuiFlyoutHeader: FunctionComponent<EuiFlyoutHeaderProps> = ({
   children,
   className,
   hasBorder = false,
diff --git a/upcoming_changelogs/7228.md b/upcoming_changelogs/7228.md
new file mode 100644
index 000000000000..76e3937ff34b
--- /dev/null
+++ b/upcoming_changelogs/7228.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiFlyoutBodyProps`, `EuiFlyoutFooterProps`, and `EuiFlyoutHeaderProps` type exports