diff --git a/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js b/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js
index 06ab7740edb2..d838486b6dfe 100644
--- a/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js
+++ b/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.1.normal.js
@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
 var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
 var _jsxRuntime = require("preact/jsx-runtime");
-var _react = require("react");
+var _preact = require("preact");
 var props = {
     answer: 42
 };
 var a = /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", _objectSpreadProps(_objectSpread({}, props), {
     children: "text"
 }), "foo");
-var b = /*#__PURE__*/ (0, _react.createElement)("div", _objectSpreadProps(_objectSpread({}, props), {
+var b = /*#__PURE__*/ (0, _preact.createElement)("div", _objectSpreadProps(_objectSpread({}, props), {
     key: "bar"
 }), "text");
 //// [react.tsx]
diff --git a/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js b/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js
index 9f53a9f73266..4b5fee103a77 100644
--- a/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js
+++ b/crates/swc/tests/tsc-references/jsxJsxsCjsTransformKeyPropCustomImportPragma.2.minified.js
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 });
 var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default, _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-require("preact/jsx-runtime"), require("react");
+require("preact/jsx-runtime"), require("preact");
 var props = {
     answer: 42
 };
diff --git a/crates/swc_ecma_transforms_react/src/jsx/mod.rs b/crates/swc_ecma_transforms_react/src/jsx/mod.rs
index 54d77e01ced0..d227d2060841 100644
--- a/crates/swc_ecma_transforms_react/src/jsx/mod.rs
+++ b/crates/swc_ecma_transforms_react/src/jsx/mod.rs
@@ -993,7 +993,7 @@ where
                         src: Str {
                             span: DUMMY_SP,
                             raw: None,
-                            value: "react".into(),
+                            value: self.import_source.clone(),
                         }
                         .into(),
                         type_only: Default::default(),
diff --git a/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/input.js b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/input.js
new file mode 100644
index 000000000000..4a95ae81a8c2
--- /dev/null
+++ b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/input.js
@@ -0,0 +1,24 @@
+import { isValidElement, Children } from "react";
+
+import * as styles from "./CheckmarkList.styles";
+
+
+const CheckmarkList = ({ children}) => {
+  const listItems = () =>
+    Children.map(children, (child, index) => {
+      if (!isValidElement(child)) {
+        return null;
+      }
+      const { children: liChildren, css: liCss, ...otherProps } = child.props;
+
+      return (
+        <li {...otherProps} key={`checkmark-list-item-${index}`} css={[styles.listItem, liCss]}>
+          {liChildren}
+        </li>
+      );
+    });
+
+  return <ul css={styles.list}>{listItems()}</ul>;
+};
+
+export { CheckmarkList };
diff --git a/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/options.json b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/options.json
new file mode 100644
index 000000000000..ff4d32278307
--- /dev/null
+++ b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/options.json
@@ -0,0 +1,6 @@
+{
+    "runtime": "automatic",
+    "importSource": "@emotion/react",
+    "pragma": "React.createElement",
+    "pragmaFrag": "React.Fragment"
+}
diff --git a/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/output.mjs b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/output.mjs
new file mode 100644
index 000000000000..6da3dafea15f
--- /dev/null
+++ b/crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-6987/output.mjs
@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { isValidElement, Children } from "react";
+import * as styles from "./CheckmarkList.styles";
+const CheckmarkList = ({ children  })=>{
+    const listItems = ()=>Children.map(children, (child, index)=>{
+            if (!/*#__PURE__*/ isValidElement(child)) {
+                return null;
+            }
+            const { children: liChildren , css: liCss , ...otherProps } = child.props;
+            return /*#__PURE__*/ _createElement("li", {
+                ...otherProps,
+                key: `checkmark-list-item-${index}`,
+                css: [
+                    styles.listItem,
+                    liCss
+                ]
+            }, liChildren);
+        });
+    return /*#__PURE__*/ _jsx("ul", {
+        css: styles.list,
+        children: listItems()
+    });
+};
+export { CheckmarkList };