diff --git a/.changeset/few-rules-decide.md b/.changeset/few-rules-decide.md
new file mode 100644
index 0000000..26efdc0
--- /dev/null
+++ b/.changeset/few-rules-decide.md
@@ -0,0 +1,5 @@
+---
+'@rsuite/charts': patch
+---
+
+Add React 18 to compatible peerDepedencies
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index eb668fa..5cfa5ff 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -11,10 +11,21 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-    container: node:latest
+    strategy:
+      matrix:
+        react-version: [16, 17, 18]
     steps:
-      - uses: actions/checkout@v2
-      - run: npm ci
+      - uses: actions/checkout@v3
+      - name: Use Node.js LTS
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+      - run: npm ci --force
       - run: npm run build
       - run: npm test -- --coverage
-      - uses: codecov/codecov-action@v1
+        env:
+          REACT: ${{ matrix.react-version }}
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v2
+        with:
+          flags: React ${{ matrix.react-version }}
diff --git a/jest.config.js b/jest.config.js
index 1907d59..5ad9d42 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,3 +16,19 @@ module.exports = {
     '\\.svg': '<rootDir>/__mocks__/svg.js',
   },
 };
+
+if (process.env.REACT === '17') {
+  module.exports.moduleNameMapper = {
+    ...module.exports.moduleNameMapper,
+    '^react((\\/.*)?)$': 'react-17$1',
+    '^react-dom((\\/.*)?)$': 'react-dom-17$1',
+  };
+}
+
+if (process.env.REACT === '18') {
+  module.exports.moduleNameMapper = {
+    ...module.exports.moduleNameMapper,
+    '^react((\\/.*)?)$': 'react-18$1',
+    '^react-dom((\\/.*)?)$': 'react-dom-18$1',
+  };
+}
diff --git a/package-lock.json b/package-lock.json
index 7e0c9e5..5a74480 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,11 @@
         "jest": "^26.6.3",
         "prettier": "^2.7.0",
         "react": "^16.8.2",
+        "react-17": "npm:react@^17.0.0",
+        "react-18": "npm:react@^18.0.0",
         "react-dom": "^16.8.2",
+        "react-dom-17": "npm:react-dom@^17.0.0",
+        "react-dom-18": "npm:react-dom@^18.0.0",
         "tsup": "^6.1.2",
         "turbo": "^1.3.1",
         "typescript": "^4.7.3"
@@ -6704,6 +6708,7 @@
       "version": "5.3.3",
       "resolved": "https://npm.hypers.cc/echarts/-/echarts-5.3.3.tgz",
       "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "2.3.0",
@@ -6732,6 +6737,7 @@
       "version": "2.3.0",
       "resolved": "https://npm.hypers.cc/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "dev": true,
       "license": "0BSD"
     },
     "node_modules/electron-to-chromium": {
@@ -11128,6 +11134,7 @@
       "version": "4.0.0",
       "resolved": "https://npm.hypers.cc/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -11488,6 +11495,7 @@
       "version": "1.4.0",
       "resolved": "https://npm.hypers.cc/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -12213,21 +12221,6 @@
         "thenify-all": "^1.0.0"
       }
     },
-    "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://npm.hypers.cc/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://npm.hypers.cc/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -12478,6 +12471,7 @@
       "version": "4.1.1",
       "resolved": "https://npm.hypers.cc/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -13106,33 +13100,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://npm.hypers.cc/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        }
-      ],
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
     "node_modules/postcss-attribute-case-insensitive": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz",
@@ -14716,6 +14683,7 @@
       "version": "15.8.1",
       "resolved": "https://npm.hypers.cc/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -14727,6 +14695,7 @@
       "version": "16.13.1",
       "resolved": "https://npm.hypers.cc/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/property-information": {
@@ -14897,6 +14866,7 @@
       "version": "16.14.0",
       "resolved": "https://npm.hypers.cc/react/-/react-16.14.0.tgz",
       "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
@@ -14907,6 +14877,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-17": {
+      "name": "react",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-18": {
+      "name": "react",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-attr-converter": {
       "version": "0.3.1",
       "resolved": "https://npm.hypers.cc/react-attr-converter/-/react-attr-converter-0.3.1.tgz",
@@ -14940,6 +14937,54 @@
         "react": "^16.14.0"
       }
     },
+    "node_modules/react-dom-17": {
+      "name": "react-dom",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
+      },
+      "peerDependencies": {
+        "react": "17.0.2"
+      }
+    },
+    "node_modules/react-dom-17/node_modules/scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/react-dom-18": {
+      "name": "react-dom",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-dom-18/node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://npm.hypers.cc/react-is/-/react-is-17.0.2.tgz",
@@ -16408,18 +16453,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://npm.hypers.cc/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-resolve": {
       "version": "0.6.0",
       "resolved": "https://npm.hypers.cc/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
@@ -18971,6 +19004,7 @@
       "version": "5.3.2",
       "resolved": "https://npm.hypers.cc/zrender/-/zrender-5.3.2.tgz",
       "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "tslib": "2.3.0"
@@ -18980,6 +19014,7 @@
       "version": "2.3.0",
       "resolved": "https://npm.hypers.cc/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "dev": true,
       "license": "0BSD"
     },
     "node_modules/zwitch": {
@@ -18995,7 +19030,7 @@
     },
     "packages/charts": {
       "name": "@rsuite/charts",
-      "version": "5.2.0",
+      "version": "5.2.1",
       "license": "MIT",
       "dependencies": {
         "echarts-for-react": "^3.0.2",
@@ -20812,57 +20847,49 @@
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
       "integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-remove-jsx-attribute": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.5.0.tgz",
       "integrity": "sha512-8zYdkym7qNyfXpWvu4yq46k41pyNM9SOstoWhKlm+IfdCE1DdnRKeMUPsWIEO/DEkaWxJ8T9esNdG3QwQ93jBA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-remove-jsx-empty-expression": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.5.0.tgz",
       "integrity": "sha512-NFdxMq3xA42Kb1UbzCVxplUc0iqSyM9X8kopImvFnB+uSDdzIHOdbs1op8ofAvVRtbg4oZiyRl3fTYeKcOe9Iw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-replace-jsx-attribute-value": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz",
       "integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-svg-dynamic-title": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz",
       "integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-svg-em-dimensions": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz",
       "integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-transform-react-native-svg": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz",
       "integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-transform-svg-component": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz",
       "integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-preset": {
       "version": "6.5.1",
@@ -21798,8 +21825,7 @@
       "version": "0.2.3",
       "resolved": "https://npm.hypers.cc/@umijs%2fplugin-analytics/-/plugin-analytics-0.2.3.tgz",
       "integrity": "sha512-6Fj+EOzd2vXe1YHjK1aqhHlITWBXcnhPd6pxAEjeGu3vAxDcfp1yM3PoRr//baBXk8CYF2krWDQGYy+OlRXM4A==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@umijs/preset-built-in": {
       "version": "3.5.35",
@@ -22003,8 +22029,7 @@
       "version": "5.3.2",
       "resolved": "https://npm.hypers.cc/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -22037,15 +22062,13 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ansi-colors": {
       "version": "4.1.3",
@@ -23859,6 +23882,7 @@
       "version": "5.3.3",
       "resolved": "https://npm.hypers.cc/echarts/-/echarts-5.3.3.tgz",
       "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "dev": true,
       "requires": {
         "tslib": "2.3.0",
         "zrender": "5.3.2"
@@ -23867,7 +23891,8 @@
         "tslib": {
           "version": "2.3.0",
           "resolved": "https://npm.hypers.cc/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
         }
       }
     },
@@ -24393,8 +24418,7 @@
       "version": "8.5.0",
       "resolved": "https://npm.hypers.cc/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
       "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-plugin-react": {
       "version": "7.30.1",
@@ -24439,8 +24463,7 @@
       "version": "4.6.0",
       "resolved": "https://npm.hypers.cc/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-scope": {
       "version": "5.1.1",
@@ -26568,8 +26591,7 @@
       "version": "1.2.2",
       "resolved": "https://npm.hypers.cc/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
       "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "jest-regex-util": {
       "version": "26.0.0",
@@ -26892,7 +26914,8 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://npm.hypers.cc/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
     },
     "js-yaml": {
       "version": "3.14.1",
@@ -27156,6 +27179,7 @@
       "version": "1.4.0",
       "resolved": "https://npm.hypers.cc/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -27662,14 +27686,6 @@
         "thenify-all": "^1.0.0"
       }
     },
-    "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://npm.hypers.cc/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://npm.hypers.cc/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -27878,7 +27894,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://npm.hypers.cc/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -28312,19 +28329,6 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
       "dev": true
     },
-    "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://npm.hypers.cc/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      }
-    },
     "postcss-attribute-case-insensitive": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz",
@@ -29501,8 +29505,7 @@
       "version": "1.3.3",
       "resolved": "https://npm.hypers.cc/prism-react-renderer/-/prism-react-renderer-1.3.3.tgz",
       "integrity": "sha512-Viur/7tBTCH2HmYzwCHmt2rEFn+rdIWNIINXyg0StiISbDiIhHKhrFuEK8eMkKgvsIYSjgGqy/hNyucHp6FpoQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "prismjs": {
       "version": "1.28.0",
@@ -29536,6 +29539,7 @@
       "version": "15.8.1",
       "resolved": "https://npm.hypers.cc/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -29545,7 +29549,8 @@
         "react-is": {
           "version": "16.13.1",
           "resolved": "https://npm.hypers.cc/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "dev": true
         }
       }
     },
@@ -29673,12 +29678,32 @@
       "version": "16.14.0",
       "resolved": "https://npm.hypers.cc/react/-/react-16.14.0.tgz",
       "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2"
       }
     },
+    "react-17": {
+      "version": "npm:react@17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-18": {
+      "version": "npm:react@18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "react-attr-converter": {
       "version": "0.3.1",
       "resolved": "https://npm.hypers.cc/react-attr-converter/-/react-attr-converter-0.3.1.tgz",
@@ -29689,8 +29714,7 @@
       "version": "1.22.1-0",
       "resolved": "https://npm.hypers.cc/react-docgen-typescript-dumi-tmp/-/react-docgen-typescript-dumi-tmp-1.22.1-0.tgz",
       "integrity": "sha512-wjuAm1yj+ZZucovow2VF0MXkH2SGZ+squZxfNdnam3oyUbHy/xZaU1ZabCn7rY+13ZFx0/NLda+ZuBgF3g8vBA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "react-dom": {
       "version": "16.14.0",
@@ -29704,6 +29728,50 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-dom-17": {
+      "version": "npm:react-dom@17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+          "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
+    "react-dom-18": {
+      "version": "npm:react-dom@18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.23.0",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+          "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0"
+          }
+        }
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://npm.hypers.cc/react-is/-/react-is-17.0.2.tgz",
@@ -30788,14 +30856,6 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
-    "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://npm.hypers.cc/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "source-map-resolve": {
       "version": "0.6.0",
       "resolved": "https://npm.hypers.cc/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
@@ -32524,8 +32584,7 @@
       "version": "7.5.8",
       "resolved": "https://npm.hypers.cc/ws/-/ws-7.5.8.tgz",
       "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "xml-name-validator": {
       "version": "3.0.0",
@@ -32610,6 +32669,7 @@
       "version": "5.3.2",
       "resolved": "https://npm.hypers.cc/zrender/-/zrender-5.3.2.tgz",
       "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "dev": true,
       "requires": {
         "tslib": "2.3.0"
       },
@@ -32617,7 +32677,8 @@
         "tslib": {
           "version": "2.3.0",
           "resolved": "https://npm.hypers.cc/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index 66f5751..6465f7f 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,10 @@
     "prettier": "^2.7.0",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
+    "react-17": "npm:react@^17.0.0",
+    "react-dom-17": "npm:react-dom@^17.0.0",
+    "react-18": "npm:react@^18.0.0",
+    "react-dom-18": "npm:react-dom@^18.0.0",
     "tsup": "^6.1.2",
     "turbo": "^1.3.1",
     "typescript": "^4.7.3"
diff --git a/packages/charts/package.json b/packages/charts/package.json
index d42ff33..80217de 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -25,7 +25,7 @@
   },
   "peerDependencies": {
     "echarts": "^5.0.0",
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "author": "Doma <leishenghao@126.com>",
   "license": "MIT",