diff --git a/packages/block-editor/src/components/resolution-tool/stories/index.story.js b/packages/block-editor/src/components/resolution-tool/stories/index.story.js
index 469172a65fa7e6..a8fef414e3be91 100644
--- a/packages/block-editor/src/components/resolution-tool/stories/index.story.js
+++ b/packages/block-editor/src/components/resolution-tool/stories/index.story.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
@@ -26,7 +26,8 @@ const meta = {
 	},
 	argTypes: {
 		value: {
-			control: { type: null },
+			control: 'radio',
+			options: [ 'thumbnail', 'medium', 'large', 'full' ],
 			description: 'Currently selected resolution value.',
 			table: {
 				type: { summary: 'string' },
@@ -87,22 +88,32 @@ const meta = {
 export default meta;
 
 export const Default = {
-	render: function Template( { onChange, ...args } ) {
-		const [ resolution, setResolution ] = useState();
+	render: function Template( { onChange, defaultValue, value, ...args } ) {
+		const [ resolution, setResolution ] = useState( value ?? defaultValue );
+
+		useEffect( () => {
+			if ( value !== resolution ) {
+				setResolution( value );
+			}
+		}, [ value, resolution ] );
+
+		const handleChange = ( newValue ) => {
+			setResolution( newValue );
+			onChange?.( newValue );
+		};
+
 		return (
 			<Panel>
 				<ToolsPanel
 					resetAll={ () => {
-						setResolution( undefined );
-						onChange?.( undefined );
+						setResolution( defaultValue );
+						onChange?.( defaultValue );
 					} }
 				>
 					<ResolutionTool
 						{ ...args }
-						onChange={ ( newValue ) => {
-							onChange?.( newValue );
-							setResolution( newValue );
-						} }
+						defaultValue={ defaultValue }
+						onChange={ handleChange }
 						value={ resolution }
 					/>
 				</ToolsPanel>