diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
index 3642c463eb59cb..26a7d0b66d2f1f 100644
--- a/packages/components/src/progress-bar/stories/index.story.tsx
+++ b/packages/components/src/progress-bar/stories/index.story.tsx
@@ -51,11 +51,15 @@ const withCustomWidthCustomCSS = `
  * }
  * ```
  */
-export const WithCustomWidth: StoryFn< typeof ProgressBar > = () => {
-	return (
+export const WithCustomWidth = Template.bind( {} );
+WithCustomWidth.args = {
+	className: 'custom-progress-bar',
+};
+WithCustomWidth.decorators = [
+	( Story ) => (
 		<>
 			<style>{ withCustomWidthCustomCSS }</style>
-			<ProgressBar className="custom-progress-bar" />
+			<Story />
 		</>
-	);
-};
+	),
+];