diff --git a/lib/assets/javascripts/react_ujs.js b/lib/assets/javascripts/react_ujs.js
index 1cfe8b4ec..f090d2800 100644
--- a/lib/assets/javascripts/react_ujs.js
+++ b/lib/assets/javascripts/react_ujs.js
@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react-dom"), require("react"), require("react-dom/server"));
+		module.exports = factory(require("react"), require("react-dom"), require("react-dom/server"), require("react-dom/client"));
 	else if(typeof define === 'function' && define.amd)
-		define(["react-dom", "react", "react-dom/server"], factory);
+		define(["react", "react-dom", "react-dom/server", "react-dom/client"], factory);
 	else if(typeof exports === 'object')
-		exports["ReactRailsUJS"] = factory(require("react-dom"), require("react"), require("react-dom/server"));
+		exports["ReactRailsUJS"] = factory(require("react"), require("react-dom"), require("react-dom/server"), require("react-dom/client"));
 	else
-		root["ReactRailsUJS"] = factory(root["ReactDOM"], root["React"], root["ReactDOMServer"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__) {
+		root["ReactRailsUJS"] = factory(root["React"], root["ReactDOM"], root["ReactDOMServer"], root["ReactDOMClient"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_14__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -106,12 +106,6 @@ module.exports = function(className) {
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
-
-/***/ }),
-/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var nativeEvents = __webpack_require__(8)
@@ -170,7 +164,7 @@ module.exports = function(ujs) {
 
 
 /***/ }),
-/* 3 */
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // Make a function which:
@@ -201,7 +195,7 @@ module.exports = function(reqctx) {
 
 
 /***/ }),
-/* 4 */
+/* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -209,34 +203,40 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony export (immutable) */ __webpack_exports__["supportsHydration"] = supportsHydration;
 /* harmony export (immutable) */ __webpack_exports__["reactHydrate"] = reactHydrate;
 /* harmony export (immutable) */ __webpack_exports__["createReactRootLike"] = createReactRootLike;
-const ReactDOM = __webpack_require__(1)
+const ReactDOMClient = __webpack_require__(14)
 
 function supportsHydration() {
-  return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"
+  return typeof ReactDOMClient.hydrate === "function" || typeof ReactDOMClient.hydrateRoot === "function"
 }
 
 function reactHydrate(node, component) {
-  if (typeof ReactDOM.hydrateRoot === "function") {
-    return ReactDOM.hydrateRoot(node, component)
+  if (typeof ReactDOMClient.hydrateRoot === "function") {
+    return ReactDOMClient.hydrateRoot(node, component)
   } else {
-    return ReactDOM.hydrate(component, node)
+    return ReactDOMClient.hydrate(component, node)
   }
 }
 
 function createReactRootLike(node) {
-  return ReactDOM.createRoot ? ReactDOM.createRoot(node) : legacyReactRootLike(node)
+  return ReactDOMClient.createRoot ? ReactDOMClient.createRoot(node) : legacyReactRootLike(node)
 }
 
 function legacyReactRootLike(node) {
   const root = {
     render(component) {
-      return ReactDOM.render(component, node)
+      return ReactDOMClient.render(component, node)
     }
   }
   return root
 }
 
 
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
+
 /***/ }),
 /* 5 */
 /***/ (function(module, exports) {
@@ -253,14 +253,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
 /* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var React = __webpack_require__(5)
-var ReactDOM = __webpack_require__(1)
+var React = __webpack_require__(4)
+var ReactDOM = __webpack_require__(5)
 var ReactDOMServer = __webpack_require__(6)
 
-var detectEvents = __webpack_require__(2)
+var detectEvents = __webpack_require__(1)
 var constructorFromGlobal = __webpack_require__(0)
-var constructorFromRequireContextWithGlobalFallback = __webpack_require__(3)
-const { supportsHydration, reactHydrate, createReactRootLike } = __webpack_require__(4)
+var constructorFromRequireContextWithGlobalFallback = __webpack_require__(2)
+const { supportsHydration, reactHydrate, createReactRootLike } = __webpack_require__(3)
 
 var ReactRailsUJS = {
   // This attribute holds the name of component which should be mounted
@@ -556,6 +556,12 @@ module.exports = function(reqctx) {
 }
 
 
+/***/ }),
+/* 14 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
+
 /***/ })
 /******/ ]);
 });
\ No newline at end of file
diff --git a/react_ujs/dist/react_ujs.js b/react_ujs/dist/react_ujs.js
index 1cfe8b4ec..f090d2800 100644
--- a/react_ujs/dist/react_ujs.js
+++ b/react_ujs/dist/react_ujs.js
@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react-dom"), require("react"), require("react-dom/server"));
+		module.exports = factory(require("react"), require("react-dom"), require("react-dom/server"), require("react-dom/client"));
 	else if(typeof define === 'function' && define.amd)
-		define(["react-dom", "react", "react-dom/server"], factory);
+		define(["react", "react-dom", "react-dom/server", "react-dom/client"], factory);
 	else if(typeof exports === 'object')
-		exports["ReactRailsUJS"] = factory(require("react-dom"), require("react"), require("react-dom/server"));
+		exports["ReactRailsUJS"] = factory(require("react"), require("react-dom"), require("react-dom/server"), require("react-dom/client"));
 	else
-		root["ReactRailsUJS"] = factory(root["ReactDOM"], root["React"], root["ReactDOMServer"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__) {
+		root["ReactRailsUJS"] = factory(root["React"], root["ReactDOM"], root["ReactDOMServer"], root["ReactDOMClient"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_14__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -106,12 +106,6 @@ module.exports = function(className) {
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
-
-/***/ }),
-/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var nativeEvents = __webpack_require__(8)
@@ -170,7 +164,7 @@ module.exports = function(ujs) {
 
 
 /***/ }),
-/* 3 */
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // Make a function which:
@@ -201,7 +195,7 @@ module.exports = function(reqctx) {
 
 
 /***/ }),
-/* 4 */
+/* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -209,34 +203,40 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony export (immutable) */ __webpack_exports__["supportsHydration"] = supportsHydration;
 /* harmony export (immutable) */ __webpack_exports__["reactHydrate"] = reactHydrate;
 /* harmony export (immutable) */ __webpack_exports__["createReactRootLike"] = createReactRootLike;
-const ReactDOM = __webpack_require__(1)
+const ReactDOMClient = __webpack_require__(14)
 
 function supportsHydration() {
-  return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"
+  return typeof ReactDOMClient.hydrate === "function" || typeof ReactDOMClient.hydrateRoot === "function"
 }
 
 function reactHydrate(node, component) {
-  if (typeof ReactDOM.hydrateRoot === "function") {
-    return ReactDOM.hydrateRoot(node, component)
+  if (typeof ReactDOMClient.hydrateRoot === "function") {
+    return ReactDOMClient.hydrateRoot(node, component)
   } else {
-    return ReactDOM.hydrate(component, node)
+    return ReactDOMClient.hydrate(component, node)
   }
 }
 
 function createReactRootLike(node) {
-  return ReactDOM.createRoot ? ReactDOM.createRoot(node) : legacyReactRootLike(node)
+  return ReactDOMClient.createRoot ? ReactDOMClient.createRoot(node) : legacyReactRootLike(node)
 }
 
 function legacyReactRootLike(node) {
   const root = {
     render(component) {
-      return ReactDOM.render(component, node)
+      return ReactDOMClient.render(component, node)
     }
   }
   return root
 }
 
 
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
+
 /***/ }),
 /* 5 */
 /***/ (function(module, exports) {
@@ -253,14 +253,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
 /* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var React = __webpack_require__(5)
-var ReactDOM = __webpack_require__(1)
+var React = __webpack_require__(4)
+var ReactDOM = __webpack_require__(5)
 var ReactDOMServer = __webpack_require__(6)
 
-var detectEvents = __webpack_require__(2)
+var detectEvents = __webpack_require__(1)
 var constructorFromGlobal = __webpack_require__(0)
-var constructorFromRequireContextWithGlobalFallback = __webpack_require__(3)
-const { supportsHydration, reactHydrate, createReactRootLike } = __webpack_require__(4)
+var constructorFromRequireContextWithGlobalFallback = __webpack_require__(2)
+const { supportsHydration, reactHydrate, createReactRootLike } = __webpack_require__(3)
 
 var ReactRailsUJS = {
   // This attribute holds the name of component which should be mounted
@@ -556,6 +556,12 @@ module.exports = function(reqctx) {
 }
 
 
+/***/ }),
+/* 14 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
+
 /***/ })
 /******/ ]);
 });
\ No newline at end of file
diff --git a/react_ujs/src/renderHelpers.js b/react_ujs/src/renderHelpers.js
index 1d9a5790e..8c9539cbf 100644
--- a/react_ujs/src/renderHelpers.js
+++ b/react_ujs/src/renderHelpers.js
@@ -1,25 +1,25 @@
-const ReactDOM = require("react-dom")
+const ReactDOMClient = require("react-dom/client")
 
 export function supportsHydration() {
-  return typeof ReactDOM.hydrate === "function" || typeof ReactDOM.hydrateRoot === "function"
+  return typeof ReactDOMClient.hydrate === "function" || typeof ReactDOMClient.hydrateRoot === "function"
 }
 
 export function reactHydrate(node, component) {
-  if (typeof ReactDOM.hydrateRoot === "function") {
-    return ReactDOM.hydrateRoot(node, component)
+  if (typeof ReactDOMClient.hydrateRoot === "function") {
+    return ReactDOMClient.hydrateRoot(node, component)
   } else {
-    return ReactDOM.hydrate(component, node)
+    return ReactDOMClient.hydrate(component, node)
   }
 }
 
 export function createReactRootLike(node) {
-  return ReactDOM.createRoot ? ReactDOM.createRoot(node) : legacyReactRootLike(node)
+  return ReactDOMClient.createRoot ? ReactDOMClient.createRoot(node) : legacyReactRootLike(node)
 }
 
 function legacyReactRootLike(node) {
   const root = {
     render(component) {
-      return ReactDOM.render(component, node)
+      return ReactDOMClient.render(component, node)
     }
   }
   return root