diff --git a/babel.config.js b/babel.config.js
index 5010931b43..93ea2a557c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -10,7 +10,7 @@ let isTestFile = filename =>
 module.exports = api => {
   api.cache(true)
   return {
-    presets: ['babel-preset-emotion-dev', '@babel/preset-typescript'],
+    presets: [emotionDevPreset, '@babel/preset-typescript'],
     overrides: [
       {
         test: filename =>
@@ -49,6 +49,15 @@ module.exports = api => {
             { runtime: 'automatic', development: true, useEmotionPlugin: true }
           ]
         ]
+      },
+      {
+        test: filename => filename && filename.includes('scripts/benchmarks'),
+        presets: [
+          [
+            emotionDevPreset,
+            { runtime: 'automatic', development: false, useEmotionPlugin: true }
+          ]
+        ]
       }
     ]
   }
diff --git a/docs/ssr.mdx b/docs/ssr.mdx
index edfcd27be6..73c0e3c7dc 100644
--- a/docs/ssr.mdx
+++ b/docs/ssr.mdx
@@ -265,16 +265,16 @@ index.js
 ```jsx
 // This has to be run before emotion inserts any styles so it's imported before the App component
 import './disable-speedy'
-import ReactDOM from 'react-dom'
+import { createRoot, hydrateRoot } from 'react-dom/client'
 import App from './App'
 
 const root = document.getElementById('root')
 
 // Check if the root node has any children to detect if the app has been prerendered
 if (root.hasChildNodes()) {
-  ReactDOM.hydrate(<App />, root)
+  hydrateRoot(root, <App />)
 } else {
-  ReactDOM.render(<App />, root)
+  createRoot(root).render(<App />)
 }
 ```
 
diff --git a/packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js b/packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js
index ab20426275..c921440643 100644
--- a/packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js
+++ b/packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js
@@ -3,7 +3,7 @@ import 'react-app-polyfill/ie11'
 import 'react-app-polyfill/stable'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+createRoot(document.getElementById('root')).render(<App />)
diff --git a/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap
index 31320834be..aa8ee3ebd5 100644
--- a/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap
+++ b/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap
@@ -6,10 +6,10 @@ import 'react-app-polyfill/ie11'
 import 'react-app-polyfill/stable'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+createRoot(document.getElementById('root')).render(<App />)
 
 
       ↓ ↓ ↓ ↓ ↓ ↓
@@ -18,10 +18,10 @@ ReactDOM.render(<App />, document.getElementById('root'))
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-ReactDOM.render(<App />, document.getElementById('root'));"
+createRoot(document.getElementById('root')).render(<App />);"
 `;
 
 exports[`@emotion/babel-plugin-jsx-pragmatic fragment-only 1`] = `
diff --git a/playgrounds/cra/src/index.js b/playgrounds/cra/src/index.js
index 432dac66b0..f9771624b5 100644
--- a/playgrounds/cra/src/index.js
+++ b/playgrounds/cra/src/index.js
@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot, hydrateRoot } from 'react-dom/client'
 import App from './App'
 
-ReactDOM.render(
+createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )
diff --git a/scripts/benchmarks/.babelrc b/scripts/benchmarks/.babelrc
deleted file mode 100644
index 4e025bd5bd..0000000000
--- a/scripts/benchmarks/.babelrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["@babel/env", { "modules": false, "loose": true }],
-    "@babel/react"
-  ],
-  "plugins": [
-    ["@babel/plugin-proposal-class-properties", { "loose": false }],
-    "babel-plugin-react-native-web",
-    "@emotion",
-    "transform-inline-environment-variables"
-  ]
-}
diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json
index d517fa7359..af16e75bba 100644
--- a/scripts/benchmarks/package.json
+++ b/scripts/benchmarks/package.json
@@ -22,5 +22,8 @@
   },
   "alias": {
     "react-native": "react-native-web"
+  },
+  "@parcel/resolver-default": {
+    "packageExports": true
   }
 }
diff --git a/scripts/benchmarks/src/app/Text.js b/scripts/benchmarks/src/app/Text.js
index 3579db4357..98bfcbd346 100644
--- a/scripts/benchmarks/src/app/Text.js
+++ b/scripts/benchmarks/src/app/Text.js
@@ -8,10 +8,6 @@ import { colors } from './theme'
 class AppText extends React.Component {
   static displayName = '@app/Text'
 
-  static contextTypes = {
-    isInAParentText: bool
-  }
-
   render() {
     const { style, ...rest } = this.props
     const { isInAParentText } = this.context
diff --git a/scripts/benchmarks/src/implementations/emotion-css-prop/Box.js b/scripts/benchmarks/src/implementations/emotion-css-prop/Box.js
index 7bdf103e39..b1978bdfc1 100644
--- a/scripts/benchmarks/src/implementations/emotion-css-prop/Box.js
+++ b/scripts/benchmarks/src/implementations/emotion-css-prop/Box.js
@@ -1,6 +1,6 @@
-/** @jsx jsx */
+/** @jsxImportSource @emotion/react */
 import { viewStyle } from './View'
-import { css, jsx } from '@emotion/react'
+import { css } from '@emotion/react'
 
 const Box = ({
   color,
diff --git a/scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js b/scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js
index e525cd1699..c0ee4f9ab0 100644
--- a/scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js
+++ b/scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react'
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
 
 const Dot = ({ size, x, y, children, color }) => (
   <div
diff --git a/scripts/benchmarks/src/implementations/emotion-css-prop/View.js b/scripts/benchmarks/src/implementations/emotion-css-prop/View.js
index bca8f755dd..148ed3e718 100644
--- a/scripts/benchmarks/src/implementations/emotion-css-prop/View.js
+++ b/scripts/benchmarks/src/implementations/emotion-css-prop/View.js
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react'
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
 
 const View = ({ style, ...other }) => {
   return <div {...other} css={css(viewStyle, style)} />
diff --git a/scripts/benchmarks/src/index.js b/scripts/benchmarks/src/index.js
index 36e828fa7a..84dae5ef8c 100644
--- a/scripts/benchmarks/src/index.js
+++ b/scripts/benchmarks/src/index.js
@@ -4,7 +4,7 @@ import Tree from './cases/Tree'
 import SierpinskiTriangle from './cases/SierpinskiTriangle'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 const packageNames = Object.keys(implementations)
 
@@ -76,4 +76,4 @@ if (!root) {
   throw new Error('could not find root')
 }
 
-ReactDOM.render(<App tests={tests} />, root)
+createRoot(root).render(<App tests={tests} />)