diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
index d6e4999407e99..7db8c9d7a6706 100644
--- a/packages/components/src/composite/stories/index.story.tsx
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo } from '@wordpress/element';
+import { useContext, useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -353,3 +353,27 @@ const Fill = ( { children } ) => {
 		},
 	},
 };
+
+export const RemoveActiveItem: StoryObj< typeof Composite > = {
+	render: ( args ) => {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const [ showThirdItem, setShowThirdItem ] = useState( true );
+		return (
+			<>
+				<Composite { ...args }>
+					<Composite.Item>Item one</Composite.Item>
+					<Composite.Item>Item two</Composite.Item>
+					{ showThirdItem && (
+						<Composite.Item>Item three</Composite.Item>
+					) }
+				</Composite>
+				<button
+					style={ { marginTop: '1em' } }
+					onClick={ () => setShowThirdItem( ( value ) => ! value ) }
+				>
+					Toggle third item
+				</button>
+			</>
+		);
+	},
+};