diff --git a/Gantt.js b/Gantt.js
index 4ab3c91..3634a0f 100644
--- a/Gantt.js
+++ b/Gantt.js
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useEffect, useRef, useImperativeHandle,
 // @ts-ignore
  } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import renderToStaticMarkup from "./renderToStaticMarkup.js";
 import HC from "highcharts/esm/highcharts-gantt.src.js";
 // Add data-hc-option to allowed attributes
 if (HC.AST.allowedAttributes.indexOf("data-hc-option") === -1) {
diff --git a/Highcharts.js b/Highcharts.js
index b7ed693..c9dc000 100644
--- a/Highcharts.js
+++ b/Highcharts.js
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useEffect, useRef, useImperativeHandle,
 // @ts-ignore
  } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import renderToStaticMarkup from "./renderToStaticMarkup.js";
 import HC from "highcharts/esm/highcharts.src.js";
 // Add data-hc-option to allowed attributes
 if (HC.AST.allowedAttributes.indexOf("data-hc-option") === -1) {
diff --git a/Maps.js b/Maps.js
index 9ba2ba7..eeb71a5 100644
--- a/Maps.js
+++ b/Maps.js
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useEffect, useRef, useImperativeHandle,
 // @ts-ignore
  } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import renderToStaticMarkup from "./renderToStaticMarkup.js";
 import HC from "highcharts/esm/highmaps.src.js";
 // Add data-hc-option to allowed attributes
 if (HC.AST.allowedAttributes.indexOf("data-hc-option") === -1) {
diff --git a/Stock.js b/Stock.js
index dbf45ba..a1a75c0 100644
--- a/Stock.js
+++ b/Stock.js
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useEffect, useRef, useImperativeHandle,
 // @ts-ignore
  } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
+import renderToStaticMarkup from "./renderToStaticMarkup.js";
 import HC from "highcharts/esm/highstock.src.js";
 // Add data-hc-option to allowed attributes
 if (HC.AST.allowedAttributes.indexOf("data-hc-option") === -1) {
diff --git a/package.json b/package.json
index 3140aec..ae23bf0 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "peerDependencies": {
     "@types/react": ">=18",
+    "@types/react-dom": ">=18",
     "react": ">=18",
     "react-dom": ">=18",
     "highcharts": ">=12.0.0"
diff --git a/renderToStaticMarkup.ts b/renderToStaticMarkup.ts
new file mode 100644
index 0000000..11c3533
--- /dev/null
+++ b/renderToStaticMarkup.ts
@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+
+/**
+ * Mimics react-dom/server's renderToStaticMarkup method for client environments,
+ * as suggested by React docs:
+ * https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code
+ */
+export default function renderToStaticMarkup(element: ReactElement): string {
+  const div = document.createElement("div");
+  const root = createRoot(div);
+  flushSync(() => {
+    root.render(element);
+  });
+  return div.innerHTML;
+}