diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 848f00a8e270b..76ed17d09c30c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -17,6 +17,7 @@
 -   `withNotices`: Update to pass `exhaustive-deps` eslint rule ([#45530](https://github.com/WordPress/gutenberg/pull/45530)).
 -   `ItemGroup`: Update to pass `exhaustive-deps` eslint rule ([#45531](https://github.com/WordPress/gutenberg/pull/45531)).
 -   `Draggable`: Convert to TypeScript ([#45471](https://github.com/WordPress/gutenberg/pull/45471)).
+-   `useCx`: fix story to satisfy the `react-hooks/exhaustive-deps` eslint rule ([#45614](https://github.com/WordPress/gutenberg/pull/45614))
 
 ### Experimental
 
diff --git a/packages/components/src/utils/hooks/stories/use-cx.js b/packages/components/src/utils/hooks/stories/use-cx.js
index b8a85f0834dbd..e7054a8f53952 100644
--- a/packages/components/src/utils/hooks/stories/use-cx.js
+++ b/packages/components/src/utils/hooks/stories/use-cx.js
@@ -32,9 +32,9 @@ const Example = ( { serializedStyles, children } ) => {
 const ExampleWithUseMemoWrong = ( { serializedStyles, children } ) => {
 	const cx = useCx();
 	// Wrong: using 'useMemo' without adding 'cx' to the dependency list.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const classes = useMemo(
 		() => cx( serializedStyles ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ serializedStyles ]
 	);
 	return <span className={ classes }>{ children }</span>;