diff --git a/.babelrc.json b/.babelrc.json
index d301495..57caf34 100644
--- a/.babelrc.json
+++ b/.babelrc.json
@@ -1,4 +1,7 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
   "plugins": ["@babel/plugin-transform-runtime"]
 }
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index af2917b..b72a65d 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v2
diff --git a/demo/UncontrolledFormExamples.jsx b/demo/UncontrolledFormExamples.jsx
index b49eaab..154bd3f 100644
--- a/demo/UncontrolledFormExamples.jsx
+++ b/demo/UncontrolledFormExamples.jsx
@@ -466,7 +466,7 @@ function FormArray() {
 
   const newElement = useCallback(() => {
     setValue((prevValue) => [...prevValue, Math.max(...prevValue) + 1]);
-  });
+  }, [setValue]);
 
   if (refresh) {
     return <></>;
diff --git a/demo/demo.jsx b/demo/demo.jsx
index 0567aeb..59e071a 100644
--- a/demo/demo.jsx
+++ b/demo/demo.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable import/max-dependencies */
 /* eslint-disable no-console */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 // eslint-disable-next-line import/no-unresolved
 import { StatefulTabs, Pagination, ToastsContainer } from '../dist/main';
@@ -18,7 +18,9 @@ import { UncontrolledFormExamples } from './UncontrolledFormExamples';
 import { ToastsWithMessageFormatterExamples } from './ToastsWithMessageFormatterExamples';
 import { ToastWithCustomState } from './ToastWithCustomState';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+
+root.render(
   <div className="mt-3">
     <React.StrictMode>
       <StatefulTabs
@@ -85,8 +87,7 @@ ReactDOM.render(
         ]}
       />
     </React.StrictMode>
-  </div>,
-  document.getElementById('root')
+  </div>
 );
 
 // eslint-disable-next-line no-undef
diff --git a/jest.config.js b/jest.config.js
index e9e2fa5..39f0d2f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,6 +2,7 @@
 /* eslint-disable import/no-commonjs */
 /* eslint-disable import/unambiguous */
 module.exports = {
+  testEnvironment: 'jsdom',
   moduleNameMapper: {
     'js-var-type': 'js-var-type/dist/main.cjs',
   },
diff --git a/package.json b/package.json
index 298dca9..8193de1 100644
--- a/package.json
+++ b/package.json
@@ -30,15 +30,17 @@
   "author": "João Vitor <joaoassisb@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.28.4",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/runtime": "^7.12.5",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^28.0.7",
+    "@rollup/plugin-node-resolve": "^15.3.1",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^9.2.1",
     "eslint": "^7.16.0",
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-import": "^2.22.1",
@@ -49,21 +51,21 @@
     "lodash-es": "^4.17.20",
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-hot-loader": "^4.13.0",
-    "rollup": "^2.35.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-refresh": "^0.14.2",
+    "rollup": "^4.52.4",
     "standard-version": "^9.0.0",
-    "webpack": "^5.33.2",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.102.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.2"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.12.5",
     "js-var-type": "^0.2.6",
     "lodash-es": "^4.17.20",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index 733d52c..6109a4e 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,17 +1,21 @@
 /* eslint-disable import/no-anonymous-default-export */
 /* eslint-disable import/no-default-export */
-import resolve from '@rollup/plugin-node-resolve';
-import babel from '@rollup/plugin-babel';
+const resolve = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const babel = require('@rollup/plugin-babel');
 
-export default {
+module.exports = {
   input: 'src/index.js',
   plugins: [
     resolve({
       extensions: ['.mjs', '.js', '.json', '.jsx'],
     }),
+    commonjs(),
     babel({
       babelHelpers: 'runtime',
-      exclude: /node_modules/, // only transpile our source code
+      exclude: /node_modules/,
+      extensions: ['.js', '.jsx'],
+      presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
     }),
   ],
   output: {
diff --git a/webpack.config.js b/webpack.config.js
index 179a9f2..4e16437 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const webpack = require('webpack');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = [
   {
@@ -28,14 +28,35 @@ module.exports = [
   {
     entry: './demo/demo.jsx',
     output: {
-      path: `${__dirname}/demo`,
       filename: 'demo.js',
+      path: `${__dirname}/demo`,
+      publicPath: '/demo/',
     },
     devServer: {
-      contentBase: `${__dirname}/demo`,
+      static: {
+        directory: `${__dirname}/demo`,
+      },
       hot: true,
+      port: 8080,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              plugins: [require.resolve('react-refresh/babel')],
+            },
+          },
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['*', '.js', '.jsx'],
     },
-    plugins: [new webpack.HotModuleReplacementPlugin()],
+    plugins: [new ReactRefreshWebpackPlugin()],
   },
   {
     entry: './docs/docs.jsx',
@@ -45,7 +66,6 @@ module.exports = [
     },
   },
 ].map((setup) => ({
-  ...setup,
   module: {
     rules: [
       {
@@ -60,4 +80,5 @@ module.exports = [
   resolve: {
     extensions: ['*', '.js', '.jsx'],
   },
+  ...setup,
 }));