diff --git a/src/ui.tsx b/src/ui.tsx
index 5c6659b..2eb20a4 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -1,6 +1,6 @@
 import useComponentSize from "@rehooks/component-size";
 import React, { ChangeEvent, Fragment, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useReducer } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import interpolator from "color-interpolate"
 import colormap from "colormap"
 
@@ -1190,7 +1190,8 @@ function DragTarget() {
   </div>;
 }
 
-ReactDOM.render(<Root />, document.getElementById("app"));
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+createRoot(document.getElementById("app")!).render(<Root />);
 
 function withSVG<T>(svgString: string, fn: (svg: SVGSVGElement) => T): T {
   const div = document.createElement("div");