diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
index dd7853d11be3ae..3ff1dcedabc2e5 100644
--- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
@@ -6,40 +6,24 @@ import TextTransformControl from '../';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
- * Text transform options
+ * Meta configuration for Storybook
  */
-const TRANSFORM_OPTIONS = [ 'none', 'uppercase', 'lowercase', 'capitalize' ];
-
-/**
- * Demo text component to show text transform effect
- */
-const DemoText = ( { transform } ) => (
-	<p style={ { textTransform: transform } }>
-		This is a sample text to demonstrate the text transformation.
-	</p>
-);
-
-/**
- * TextTransformControl Properties
- */
-export default {
+const meta = {
 	title: 'BlockEditor/TextTransformControl',
 	component: TextTransformControl,
-	argTypes: {
-		value: {
-			control: 'select',
-			options: TRANSFORM_OPTIONS,
-			description: 'Currently selected text transform value',
-			table: {
-				type: {
-					summary: 'string',
-				},
-				defaultValue: { summary: 'none' },
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Control to facilitate text transformation selections.',
 			},
 		},
+	},
+	argTypes: {
 		onChange: {
 			action: 'onChange',
 			control: {
@@ -53,84 +37,38 @@ export default {
 			},
 		},
 		className: {
-			control: 'text',
+			control: { type: 'text' },
 			description: 'Additional CSS class name to apply',
 			table: {
 				type: { summary: 'string' },
 			},
 		},
-	},
-	render: function Render( { onChange, value, className } ) {
-		const [ selectedTransform, setSelectedTransform ] = useState( value );
-
-		useEffect( () => {
-			setSelectedTransform( value );
-		}, [ value ] );
-
-		const handleTransformChange = ( newValue ) => {
-			const updatedValue =
-				newValue === selectedTransform ? undefined : newValue;
-			setSelectedTransform( updatedValue );
-			if ( onChange ) {
-				onChange( updatedValue );
-			}
-		};
-
-		return (
-			<div>
-				<TextTransformControl
-					value={ selectedTransform }
-					onChange={ handleTransformChange }
-					className={ className }
-				/>
-				<DemoText transform={ selectedTransform } />
-			</div>
-		);
-	},
-};
-
-/**
- * Story demonstrating TextTransformControl with default settings
- */
-export const Default = {
-	args: {
-		value: 'none',
+		value: {
+			control: { type: null },
+			description: 'Currently selected writing mode.',
+			table: { type: { summary: 'string' } },
+		},
 	},
 };
 
-/**
- * TextTransformControl with uppercase transform selected
- */
-export const WithUppercase = {
-	args: {
-		value: 'uppercase',
-	},
-};
+export default meta;
 
 /**
- * TextTransformControl with lowercase transform selected
+ * Default Story Export
  */
-export const WithLowercase = {
-	args: {
-		value: 'lowercase',
-	},
-};
-
-/**
- * TextTransformControl with capitalize transform selected
- */
-export const WithCapitalize = {
-	args: {
-		value: 'capitalize',
-	},
-};
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
 
-/**
- * TextTransformControl with custom className
- */
-export const WithCustomClass = {
-	args: {
-		value: 'none',
-		className: 'custom-text-transform-control',
+		return (
+			<TextTransformControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
 	},
 };