add some changes that are rendering properly

src/components/NoticeComponent.tsx

@@ -36,6 +36,7 @@ export interface NoticeProps {
     zIndex?: number,
     style?: React.CSSProperties
     biggerCloseButton?: boolean;
+    children?: React.ReactNode
 }
 
 export interface NoticeState {

src/components/NoticeTextSectionComponent.tsx

@@ -4,7 +4,8 @@ export interface NoticeTextSelectionProps {
     icon?: string,
     text: string,
     idSuffix: string,
-    onClick?: (event: React.MouseEvent) => unknown
+    onClick?: (event: React.MouseEvent) => unknown,
+    children?: React.ReactNode
 }
 
 export interface NoticeTextSelectionState {

src/components/SponsorTimeEditComponent.tsx

@@ -23,6 +23,7 @@ export interface SponsorTimeEditProps {
     submissionNotice: SubmissionNoticeComponent;
     categoryList?: Category[];
     categoryChangeListener?: (index: number, category: Category) => void;
+    children?: React.ReactNode;
 }
 
 export interface SponsorTimeEditState {

src/components/options/CategorySkipOptionsComponent.tsx

@@ -13,6 +13,7 @@ export interface CategorySkipOptionsProps {
     category: Category;
     defaultColor?: string;
     defaultPreviewColor?: string;
+    children?: React.ReactNode[];
 }
 
 export interface CategorySkipOptionsState {

src/components/options/KeybindComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import Config from "../../config";
 import { Keybind } from "../../types";
 import KeybindDialogComponent from "./KeybindDialogComponent";
@@ -14,6 +14,7 @@ export interface KeybindState {
 }
 
 let dialog;
+let root: Root;
 
 class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
     constructor(props: KeybindProps) {
@@ -56,11 +57,12 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
         dialog = parent.document.createElement("div");
         dialog.id = "keybind-dialog";
         parent.document.body.prepend(dialog);
-        ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
+        root = createRoot(dialog);
+        root.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />);
     }
 
     closeEditDialog(updateWith: Keybind): void {
-        ReactDOM.unmountComponentAtNode(dialog);
+        root.unmount();
         dialog.remove();
         if (updateWith != null)
             this.setState({keybind: updateWith});

src/components/options/UnsubmittedVideoListItem.tsx

@@ -5,6 +5,7 @@ import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";
 
 export interface UnsubmittedVideosListItemProps {
     videoID: string;
+    children?: React.ReactNode[];
 }
 
 export interface UnsubmittedVideosListItemState {

src/options.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 
 import Config from "./config";
 import * as CompileConfig from "../config.json";
@@ -258,7 +258,8 @@ async function init() {
                 break;
             }
             case "keybind-change": {
-                ReactDOM.render(React.createElement(KeybindComponent, {option: option}), optionsElements[i].querySelector("div"));
+                const root = createRoot(optionsElements[i].querySelector("div"));
+                root.render(React.createElement(KeybindComponent, {option: option}));
                 break;
             }
             case "display": {

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} />
         );
     }
 

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();
 

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} />
         );
     }