diff --git a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.input.tsx b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.input.tsx
index fa3ed75115374..2a73a63c3e30e 100644
--- a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.input.tsx
+++ b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.input.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, type JSX } from 'react'
 
-export default function Page({ params }: { params: { slug: string } }) {
+export default function Page({ params }: { params: { slug: string } }): JSX.Element {
   const [text, setText] = useState('')
   // usage of `params`
   globalThis.f1(params)
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.output.tsx b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.output.tsx
index 2067ab4547bb3..748645e3c1084 100644
--- a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.output.tsx
+++ b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-04.output.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { useState, use } from 'react';
+import { useState, type JSX, use } from 'react';
 
-export default function Page(props: { params: Promise<{ slug: string }> }) {
+export default function Page(props: { params: Promise<{ slug: string }> }): JSX.Element {
   const params = use(props.params);
   const [text, setText] = useState('')
   // usage of `params`
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.input.tsx b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.input.tsx
new file mode 100644
index 0000000000000..1057354763530
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.input.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import type { JSX } from 'react'
+
+interface Props {
+  params: { slug: string }
+}
+
+export default function Page({ params }: Props): JSX.Element {
+  const { slug } = params
+
+  return <p>{slug}</p>
+}
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.output.tsx b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.output.tsx
new file mode 100644
index 0000000000000..1ec9828aa1360
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-30.output.tsx
@@ -0,0 +1,15 @@
+'use client';
+import { use } from "react";
+
+import type { JSX } from 'react'
+
+interface Props {
+  params: Promise<{ slug: string }>
+}
+
+export default function Page(props: Props): JSX.Element {
+  const params = use(props.params);
+  const { slug } = params
+
+  return <p>{slug}</p>
+}
diff --git a/packages/next-codemod/transforms/lib/async-request-api/utils.ts b/packages/next-codemod/transforms/lib/async-request-api/utils.ts
index 02a888b0da818..d18e02487354f 100644
--- a/packages/next-codemod/transforms/lib/async-request-api/utils.ts
+++ b/packages/next-codemod/transforms/lib/async-request-api/utils.ts
@@ -188,6 +188,8 @@ export function insertReactUseImport(root: Collection<any>, j: API['j']) {
       source: {
         value: 'react',
       },
+      // Skip the type only react imports
+      importKind: 'value',
     })
 
     if (reactImportDeclaration.size() > 0) {
@@ -197,14 +199,8 @@ export function insertReactUseImport(root: Collection<any>, j: API['j']) {
       importNode.specifiers.push(j.importSpecifier(j.identifier('use')))
     } else {
       // Final all type imports to 'react'
-      const reactImport = root.find(j.ImportDeclaration, {
-        source: {
-          value: 'react',
-        },
-      })
-
-      if (reactImport.size() > 0) {
-        reactImport
+      if (reactImportDeclaration.size() > 0) {
+        reactImportDeclaration
           .get()
           .node.specifiers.push(j.importSpecifier(j.identifier('use')))
       } else {