codemod: fix type only react import (#71053)

Co-authored-by: JJ Kasper <jj@jjsweb.site>

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)

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`

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>
+}

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>
+}

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 {