diff --git a/.eslintrc b/.eslintrc
index f8cbfaffb..b91cdefad 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,7 +12,9 @@
       {
         "devDependencies": ["**/__tests__/*", "rollup.config.mjs"]
       }
-    ]
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   },
   "overrides": [
     {
@@ -20,7 +22,11 @@
       "parserOptions": {
         "project": ["tsconfig.json"]
       },
-      "extends": ["./packages/eslint-config-react/typescript.js"]
+      "extends": ["./packages/eslint-config-react/typescript.js"],
+      "rules": {
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off"
+      }
     }
   ]
 }
diff --git a/babel.config.json b/babel.config.json
index 35c8aec47..cfe4d11af 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -1,7 +1,12 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
     ["@babel/preset-typescript", { "allowDeclareFields": true }]
   ],
   "plugins": ["@babel/plugin-transform-runtime"]
diff --git a/packages/jest-helpers/src/__tests__/index.test.tsx b/packages/jest-helpers/src/__tests__/index.test.tsx
index 208b5a6e8..a474aad7c 100644
--- a/packages/jest-helpers/src/__tests__/index.test.tsx
+++ b/packages/jest-helpers/src/__tests__/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import makeHelpers from '..'
 import { RenderWithThemeFn } from '../helpers/renderWithTheme'
 import { ShouldMatchEmotionSnapshotFn } from '../helpers/shouldMatchEmotionSnapshot'
diff --git a/packages/jest-helpers/src/helpers/renderWithTheme.tsx b/packages/jest-helpers/src/helpers/renderWithTheme.tsx
index 62d8b8a36..59ccdf785 100644
--- a/packages/jest-helpers/src/helpers/renderWithTheme.tsx
+++ b/packages/jest-helpers/src/helpers/renderWithTheme.tsx
@@ -1,7 +1,7 @@
 import createCache from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
 import { RenderOptions, render } from '@testing-library/react'
-import React, { FC, ReactNode } from 'react'
+import { FC, ReactNode } from 'react'
 
 const emotionCache = createCache({
   key: 'cache',
diff --git a/packages/use-dataloader/.eslintrc.cjs b/packages/use-dataloader/.eslintrc.cjs
index f4bd0a419..8e30513c1 100644
--- a/packages/use-dataloader/.eslintrc.cjs
+++ b/packages/use-dataloader/.eslintrc.cjs
@@ -5,6 +5,6 @@ module.exports = {
     'import/no-extraneous-dependencies': [
       'error',
       { packageDir: [__dirname, join(__dirname, '../../')] }
-    ]
+    ],
   }
 };
diff --git a/packages/use-dataloader/src/DataLoaderProvider.tsx b/packages/use-dataloader/src/DataLoaderProvider.tsx
index 1d8c35b16..c63352b39 100644
--- a/packages/use-dataloader/src/DataLoaderProvider.tsx
+++ b/packages/use-dataloader/src/DataLoaderProvider.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, {
+import {
   ReactElement,
   ReactNode,
   createContext,
diff --git a/packages/use-dataloader/src/__tests__/DataLoaderProvider.test.tsx b/packages/use-dataloader/src/__tests__/DataLoaderProvider.test.tsx
index 42b0b8c99..536a18e3d 100644
--- a/packages/use-dataloader/src/__tests__/DataLoaderProvider.test.tsx
+++ b/packages/use-dataloader/src/__tests__/DataLoaderProvider.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { act, renderHook } from '@testing-library/react-hooks'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import DataLoaderProvider, { useDataLoaderContext } from '../DataLoaderProvider'
 import { KEY_IS_NOT_STRING_ERROR, StatusEnum } from '../constants'
 
diff --git a/packages/use-dataloader/src/__tests__/useDataLoader.test.tsx b/packages/use-dataloader/src/__tests__/useDataLoader.test.tsx
index abc9bdc6e..48c40c4f5 100644
--- a/packages/use-dataloader/src/__tests__/useDataLoader.test.tsx
+++ b/packages/use-dataloader/src/__tests__/useDataLoader.test.tsx
@@ -1,5 +1,4 @@
 import { act, renderHook } from '@testing-library/react-hooks'
-import React from 'react'
 import DataLoaderProvider, { useDataLoaderContext } from '../DataLoaderProvider'
 import { KEY_IS_NOT_STRING_ERROR } from '../constants'
 import { PromiseType, UseDataLoaderConfig, UseDataLoaderResult } from '../types'
diff --git a/packages/use-dataloader/src/__tests__/usePaginatedDataLoader.test.tsx b/packages/use-dataloader/src/__tests__/usePaginatedDataLoader.test.tsx
index 7d37f432b..f8a559dcb 100644
--- a/packages/use-dataloader/src/__tests__/usePaginatedDataLoader.test.tsx
+++ b/packages/use-dataloader/src/__tests__/usePaginatedDataLoader.test.tsx
@@ -1,6 +1,5 @@
 import { act } from '@testing-library/react'
 import { renderHook } from '@testing-library/react-hooks'
-import React from 'react'
 import DataLoaderProvider from '../DataLoaderProvider'
 import { KEY_IS_NOT_STRING_ERROR } from '../constants'
 import {
diff --git a/packages/use-i18n/.eslintrc.cjs b/packages/use-i18n/.eslintrc.cjs
index f4bd0a419..8e30513c1 100644
--- a/packages/use-i18n/.eslintrc.cjs
+++ b/packages/use-i18n/.eslintrc.cjs
@@ -5,6 +5,6 @@ module.exports = {
     'import/no-extraneous-dependencies': [
       'error',
       { packageDir: [__dirname, join(__dirname, '../../')] }
-    ]
+    ],
   }
 };
diff --git a/packages/use-i18n/src/__tests__/usei18n.tsx b/packages/use-i18n/src/__tests__/usei18n.tsx
index 0f03b45b7..211b49774 100644
--- a/packages/use-i18n/src/__tests__/usei18n.tsx
+++ b/packages/use-i18n/src/__tests__/usei18n.tsx
@@ -1,6 +1,5 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 import mockdate from 'mockdate'
-import React from 'react'
 import I18n, { useI18n, useTranslation } from '..'
 import en from './locales/en.json'
 import es from './locales/es.json'
diff --git a/packages/use-i18n/src/usei18n.tsx b/packages/use-i18n/src/usei18n.tsx
index 3b6a1f273..df98d0904 100644
--- a/packages/use-i18n/src/usei18n.tsx
+++ b/packages/use-i18n/src/usei18n.tsx
@@ -5,7 +5,7 @@ import {
   formatDistanceToNowStrict,
 } from 'date-fns'
 import PropTypes from 'prop-types'
-import React, {
+import {
   ReactElement,
   ReactNode,
   createContext,
diff --git a/packages/use-query-params/.eslintrc.cjs b/packages/use-query-params/.eslintrc.cjs
index f4bd0a419..8e30513c1 100644
--- a/packages/use-query-params/.eslintrc.cjs
+++ b/packages/use-query-params/.eslintrc.cjs
@@ -5,6 +5,6 @@ module.exports = {
     'import/no-extraneous-dependencies': [
       'error',
       { packageDir: [__dirname, join(__dirname, '../../')] }
-    ]
+    ],
   }
 };
diff --git a/packages/use-query-params/src/__tests__/index.tsx b/packages/use-query-params/src/__tests__/index.tsx
index 12f5448d0..17a362555 100644
--- a/packages/use-query-params/src/__tests__/index.tsx
+++ b/packages/use-query-params/src/__tests__/index.tsx
@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 import { History, createMemoryHistory } from 'history'
-import React, { ReactNode, useLayoutEffect, useState } from 'react'
+import { ReactNode, useLayoutEffect, useState } from 'react'
 import { MemoryRouter, Router } from 'react-router-dom'
 import useQueryParams from '..'
 
diff --git a/packages/use-segment/src/__tests__/index.tsx b/packages/use-segment/src/__tests__/index.tsx
index 537958ae1..e0df34f32 100644
--- a/packages/use-segment/src/__tests__/index.tsx
+++ b/packages/use-segment/src/__tests__/index.tsx
@@ -1,6 +1,6 @@
 import { AnalyticsBrowser, Context } from '@segment/analytics-next'
 import { renderHook } from '@testing-library/react-hooks'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import waitForExpect from 'wait-for-expect'
 import SegmentProvider, { useSegment } from '..'
 import type { Analytics, OnEventError, SegmentProviderProps } from '..'
diff --git a/packages/use-segment/src/useSegment.tsx b/packages/use-segment/src/useSegment.tsx
index c33362434..639117b26 100644
--- a/packages/use-segment/src/useSegment.tsx
+++ b/packages/use-segment/src/useSegment.tsx
@@ -4,7 +4,7 @@ import type {
   AnalyticsSettings,
   InitOptions,
 } from '@segment/analytics-next'
-import React, {
+import {
   ReactNode,
   createContext,
   useContext,
diff --git a/rollup.config.mjs b/rollup.config.mjs
index f2eab7cca..bc7dba4ed 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -39,11 +39,16 @@ const getConfig = (pkg, isBrowser = false) => {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.es', '.mjs'],
         plugins: [
           '@babel/plugin-transform-runtime',
-          '@babel/plugin-transform-react-jsx',
         ],
         presets: [
           ['@babel/env', { modules: false, targets }],
           '@babel/preset-typescript',
+          [
+            '@babel/preset-react',
+            {
+              runtime: 'automatic',
+            },
+          ],
         ],
       }),
       nodeResolve({