add some changes that are rendering properly

3 files changed, 15 insertions, 13 deletions

diff --git a/src/render/CategoryChooser.tsx b/src/render/CategoryChooser.tsx
index 0f5d557f..5b708a3f 100644
--- a/src/render/CategoryChooser.tsx
+++ b/src/render/CategoryChooser.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+
 import CategoryChooserComponent from "../components/options/CategoryChooserComponent";
 
 class CategoryChooser {
@@ -9,9 +10,9 @@ class CategoryChooser {
     constructor(element: Element) {
         this.ref = React.createRef();
 
-        ReactDOM.render(
-            <CategoryChooserComponent ref={this.ref} />,
-            element
+        const root = createRoot(element);
+        root.render(
+            <CategoryChooserComponent ref={this.ref} />
         );
     }
 
diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx
index f5a81033..b1be46a2 100644
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 import Utils from "../utils";
 const utils = new Utils();
@@ -18,6 +18,7 @@ class SkipNotice {
     noticeElement: HTMLDivElement;
 
     skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
+    root: Root;
 
     constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, unskipTime: number = null, startReskip = false) {
         this.skipNoticeRef = React.createRef();
@@ -41,7 +42,8 @@ class SkipNotice {
 
         referenceNode.prepend(this.noticeElement);
 
-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
             <SkipNoticeComponent segments={segments} 
                 autoSkip={autoSkip} 
                 startReskip={startReskip}
@@ -50,8 +52,7 @@ class SkipNotice {
                 closeListener={() => this.close()}
                 smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
                     || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
-                unskipTime={unskipTime} />,
-            this.noticeElement
+                unskipTime={unskipTime} />
         );
     }
 
@@ -62,7 +63,7 @@ class SkipNotice {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
 
diff --git a/src/render/UnsubmittedVideos.tsx b/src/render/UnsubmittedVideos.tsx
index 26796754..3b3b3855 100644
--- a/src/render/UnsubmittedVideos.tsx
+++ b/src/render/UnsubmittedVideos.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosComponent";
 
 class UnsubmittedVideos {
@@ -9,9 +9,9 @@ class UnsubmittedVideos {
     constructor(element: Element) {
         this.ref = React.createRef();
 
-        ReactDOM.render(
-            <UnsubmittedVideosComponent ref={this.ref} />,
-            element
+        const root = createRoot(element);
+        root.render(
+            <UnsubmittedVideosComponent ref={this.ref} />
         );
     }