diff --git a/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx b/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx
index 5c0f8da3d9c8..422090b872eb 100644
--- a/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx
+++ b/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx
@@ -1,6 +1,6 @@
 // Pass props to your component by passing an `args` object to your story
 //
-// ```jsx
+// ```tsx
 // export const Primary: Story = {
 //  args: {
 //    propName: propValue
@@ -30,5 +30,5 @@ const author = {
 export const Primary: Story = {
   render: () => {
     return <Author author={author} />
-  }
+  },
 }
diff --git a/__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx b/__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx
index fd83e7023d7a..ce90781c0f2f 100644
--- a/__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx
+++ b/__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx
@@ -1,6 +1,6 @@
 // Pass props to your component by passing an `args` object to your story
 //
-// ```jsx
+// ```tsx
 // export const Primary: Story = {
 //  args: {
 //    propName: propValue
diff --git a/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx b/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
index 43074d5880a5..b8abecc30483 100644
--- a/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
+++ b/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
@@ -13,5 +13,5 @@ type Story = StoryObj<typeof BlogPostPage>
 export const Primary: Story = {
   render: (args) => {
     return <BlogPostPage id={42} {...args} />
-  }
+  },
 }
diff --git a/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx b/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
index ee6a1601562c..9b15c7347441 100644
--- a/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
+++ b/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
@@ -11,5 +11,7 @@ export default meta
 type Story = StoryObj<typeof WaterfallPage>
 
 export const Primary: Story = {
-  render: (args) => <WaterfallPage id={42} {...args} />,
+  render: (args) => {
+    return <WaterfallPage id={42} {...args} />
+  },
 }
diff --git a/packages/cli/src/commands/generate/component/templates/stories.tsx.template b/packages/cli/src/commands/generate/component/templates/stories.tsx.template
index 992c6041dcb7..acb55f297732 100644
--- a/packages/cli/src/commands/generate/component/templates/stories.tsx.template
+++ b/packages/cli/src/commands/generate/component/templates/stories.tsx.template
@@ -1,6 +1,6 @@
 // Pass props to your component by passing an `args` object to your story
 //
-// ```jsx
+// ```tsx
 // export const Primary: Story = {
 //  args: {
 //    propName: propValue
diff --git a/tasks/test-project/codemods/updateAuthorStories.js b/tasks/test-project/codemods/updateAuthorStories.js
index bc7e9d77957a..96efd2db365c 100644
--- a/tasks/test-project/codemods/updateAuthorStories.js
+++ b/tasks/test-project/codemods/updateAuthorStories.js
@@ -2,6 +2,26 @@ export default (file, api) => {
   const j = api.jscodeshift
   const root = j(file.source)
 
+  // Find `export const Primary: Story = {}`
+  const exportStatement = root.find(j.ExportNamedDeclaration, {
+    declaration: {
+      type: 'VariableDeclaration',
+      declarations: [
+        {
+          type: 'VariableDeclarator',
+          id: {
+            type: 'Identifier',
+            name: 'Primary',
+          },
+          init: {
+            type: 'ObjectExpression',
+            properties: [],
+          },
+        },
+      ],
+    },
+  })
+
   // const author = {
   //   email: 'story.user@email.com',
   //   fullName: 'Story User',
@@ -10,28 +30,68 @@ export default (file, api) => {
     j.variableDeclarator(
       j.identifier('author'),
       j.objectExpression([
-        j.property('init', j.identifier('email'), j.literal('story.user@email.com')),
+        j.property(
+          'init',
+          j.identifier('email'),
+          j.literal('story.user@email.com')
+        ),
         j.property('init', j.identifier('fullName'), j.literal('Story User')),
       ])
-    )
+    ),
   ])
 
-  root.find(j.ExportNamedDeclaration).insertBefore(authorDeclaration)
+  // export const Primary: Story = {
+  //   render: () => {
+  //     return <Author author={author} />
+  //   }
+  // }
+  const primaryIdentifier = j.identifier('Primary')
+  primaryIdentifier.typeAnnotation = j.tsTypeAnnotation(
+    j.tsTypeReference(j.identifier('Story'), null)
+  )
 
-  // Change `<Author />` to `<Author author={author} />`
-  root
-    .find(j.JSXOpeningElement, { name: { name: 'Author' } } )
-    .replaceWith((nodePath) => {
-      const { node } = nodePath
-      node.attributes.push(
-        j.jsxAttribute(
-          j.jsxIdentifier('author'),
-          j.jsxExpressionContainer(j.identifier('author'))
-        )
-      )
+  const primaryWithRender = j.exportNamedDeclaration(
+    j.variableDeclaration('const', [
+      j.variableDeclarator(
+        primaryIdentifier,
+        j.objectExpression([
+          j.property(
+            'init',
+            j.identifier('render'),
+            j.arrowFunctionExpression(
+              [],
+              j.blockStatement([
+                j.returnStatement(
+                  j.jsxElement(
+                    j.jsxOpeningElement(
+                      j.jsxIdentifier('Author'),
+                      [
+                        j.jsxAttribute(
+                          j.jsxIdentifier('author'),
+                          j.jsxExpressionContainer(j.identifier('author'))
+                        ),
+                      ],
+                      true
+                    ),
+                    null,
+                    [],
+                    true
+                  )
+                ),
+              ])
+            )
+          ),
+        ])
+      ),
+    ])
+  )
 
-      return node
-    })
+  if (exportStatement.length > 0) {
+    exportStatement.insertBefore(authorDeclaration)
+    exportStatement.replaceWith(primaryWithRender)
+  } else {
+    throw new Error('Could not find export statement in author story')
+  }
 
   return root.toSource()
 }
diff --git a/tasks/test-project/codemods/updateBlogPostPageStories.js b/tasks/test-project/codemods/updateBlogPostPageStories.js
new file mode 100644
index 000000000000..eada95b8d15f
--- /dev/null
+++ b/tasks/test-project/codemods/updateBlogPostPageStories.js
@@ -0,0 +1,83 @@
+export default (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  // Find `export const Primary: Story = {}`
+  const exportStatement = root.find(j.ExportNamedDeclaration, {
+    declaration: {
+      type: 'VariableDeclaration',
+      declarations: [
+        {
+          type: 'VariableDeclarator',
+          id: {
+            type: 'Identifier',
+            name: 'Primary',
+          },
+          init: {
+            type: 'ObjectExpression',
+            properties: [],
+          },
+        },
+      ],
+    },
+  })
+
+  // Create the `Primary` identifier
+  const primaryIdentifier = j.identifier('Primary')
+  // Add the `Story` type annotation
+  primaryIdentifier.typeAnnotation = j.tsTypeAnnotation(
+    j.tsTypeReference(j.identifier('Story'), null)
+  )
+
+  // export const Primary: Story = {
+  //   render: (args) => {
+  //     return <BlogPostPage id={42} {...args} />
+  //   }
+  // }
+  const primaryWithRender = j.exportNamedDeclaration(
+    j.variableDeclaration('const', [
+      j.variableDeclarator(
+        primaryIdentifier,
+        j.objectExpression([
+          j.property(
+            'init',
+            j.identifier('render'),
+            j.arrowFunctionExpression(
+              [j.identifier('args')],
+              j.blockStatement([
+                j.returnStatement(
+                  j.jsxElement(
+                    j.jsxOpeningElement(
+                      j.jsxIdentifier('BlogPostPage'),
+                      [
+                        j.jsxAttribute(
+                          j.jsxIdentifier('id'),
+                          j.jsxExpressionContainer(j.numericLiteral(42))
+                        ),
+                        j.jsxSpreadAttribute(j.identifier('args')),
+                      ],
+                      true
+                    ),
+                    null,
+                    [],
+                    true
+                  )
+                ),
+              ])
+            )
+          ),
+        ])
+      ),
+    ])
+  )
+
+  if (exportStatement.length > 0) {
+    // Replace the empty object export with the object with the `render`
+    // property
+    exportStatement.replaceWith(primaryWithRender)
+  } else {
+    throw new Error('Could not find export statement in author story')
+  }
+
+  return root.toSource()
+}
diff --git a/tasks/test-project/codemods/updateWaterfallPageStories.js b/tasks/test-project/codemods/updateWaterfallPageStories.js
new file mode 100644
index 000000000000..99b646980f80
--- /dev/null
+++ b/tasks/test-project/codemods/updateWaterfallPageStories.js
@@ -0,0 +1,83 @@
+export default (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  // Find `export const Primary: Story = {}`
+  const exportStatement = root.find(j.ExportNamedDeclaration, {
+    declaration: {
+      type: 'VariableDeclaration',
+      declarations: [
+        {
+          type: 'VariableDeclarator',
+          id: {
+            type: 'Identifier',
+            name: 'Primary',
+          },
+          init: {
+            type: 'ObjectExpression',
+            properties: [],
+          },
+        },
+      ],
+    },
+  })
+
+  // Create the `Primary` identifier
+  const primaryIdentifier = j.identifier('Primary')
+  // Add the `Story` type annotation
+  primaryIdentifier.typeAnnotation = j.tsTypeAnnotation(
+    j.tsTypeReference(j.identifier('Story'), null)
+  )
+
+  // export const Primary: Story = {
+  //   render: (args) => {
+  //     return <WaterfallPage id={42} {...args} />
+  //   }
+  // }
+  const primaryWithRender = j.exportNamedDeclaration(
+    j.variableDeclaration('const', [
+      j.variableDeclarator(
+        primaryIdentifier,
+        j.objectExpression([
+          j.property(
+            'init',
+            j.identifier('render'),
+            j.arrowFunctionExpression(
+              [j.identifier('args')],
+              j.blockStatement([
+                j.returnStatement(
+                  j.jsxElement(
+                    j.jsxOpeningElement(
+                      j.jsxIdentifier('WaterfallPage'),
+                      [
+                        j.jsxAttribute(
+                          j.jsxIdentifier('id'),
+                          j.jsxExpressionContainer(j.numericLiteral(42))
+                        ),
+                        j.jsxSpreadAttribute(j.identifier('args')),
+                      ],
+                      true
+                    ),
+                    null,
+                    [],
+                    true
+                  )
+                ),
+              ])
+            )
+          ),
+        ])
+      ),
+    ])
+  )
+
+  if (exportStatement.length > 0) {
+    // Replace the empty object export with the object with the `render`
+    // property
+    exportStatement.replaceWith(primaryWithRender)
+  } else {
+    throw new Error('Could not find export statement in author story')
+  }
+
+  return root.toSource()
+}
diff --git a/tasks/test-project/rebuild-test-project-fixture.js b/tasks/test-project/rebuild-test-project-fixture.js
index c4363c45689b..0f9dedcfe77f 100755
--- a/tasks/test-project/rebuild-test-project-fixture.js
+++ b/tasks/test-project/rebuild-test-project-fixture.js
@@ -441,7 +441,7 @@ async function runCommand() {
         if (
           e instanceof ExecaError &&
           !e.stderr &&
-          e.stdout.includes('15 problems (15 errors, 0 warnings)')
+          e.stdout.includes('14 problems (14 errors, 0 warnings)')
         ) {
           // This is unfortunate, but linting is expected to fail.
           // This is the expected error message, so we just fall through
diff --git a/tasks/test-project/tui-tasks.js b/tasks/test-project/tui-tasks.js
index 35630c0c6110..caa1e29336a4 100644
--- a/tasks/test-project/tui-tasks.js
+++ b/tasks/test-project/tui-tasks.js
@@ -122,10 +122,15 @@ async function webTasks(outputPath, { linkWithLatestFwBuild }) {
         task: async () => {
           await createPage('blogPost /blog-post/{id:Int}')
 
-          return applyCodemod(
+          await applyCodemod(
             'blogPostPage.js',
             fullPath('web/src/pages/BlogPostPage/BlogPostPage')
           )
+
+          return applyCodemod(
+            'updateBlogPostPageStories.js',
+            fullPath('web/src/pages/BlogPostPage/BlogPostPage.stories')
+          )
         },
       },
       {
@@ -192,6 +197,11 @@ async function webTasks(outputPath, { linkWithLatestFwBuild }) {
             'waterfallPage.js',
             fullPath('web/src/pages/WaterfallPage/WaterfallPage')
           )
+
+          await applyCodemod(
+            'updateWaterfallPageStories.js',
+            fullPath('web/src/pages/WaterfallPage/WaterfallPage.stories')
+          )
         },
       },
     ]