dependencies: bump to React 18

client/src/javascript/app.tsx

@@ -1,7 +1,7 @@
 import {BrowserRouter} from 'react-router-dom';
+import {createRoot} from 'react-dom/client';
 import {FC, lazy, Suspense, useEffect} from 'react';
 import {observer} from 'mobx-react';
-import ReactDOM from 'react-dom';
 import {Route, Routes} from 'react-router';
 import {useMedia} from 'react-use';
 
@@ -82,4 +82,7 @@ const FloodApp: FC = observer(() => {
   );
 });
 
-ReactDOM.render(<FloodApp />, document.getElementById('app'));
+const container = document.getElementById('app') as HTMLElement;
+const root = createRoot(container);
+
+root.render(<FloodApp />);

client/src/javascript/components/general/Tooltip.tsx

@@ -18,6 +18,7 @@ type Clearance = Coordinates & {
 };
 
 interface TooltipProps {
+  children?: React.ReactNode;
   align?: Align;
   anchor?: Align;
   position?: Position;

client/src/javascript/components/modals/Modal.tsx

@@ -53,7 +53,7 @@ const Modal: FC<ModalProps> = (props: ModalProps) => {
     const activeTab = tabs[activeTabId];
     const contentClasses = classnames('modal__content', activeTab.modalContentClasses);
 
-    const ModalContentComponent = activeTab.content as FC;
+    const ModalContentComponent = activeTab.content;
     const modalContentData = activeTab.props;
 
     const modalTabs = (

client/src/javascript/components/modals/ModalTabs.tsx

@@ -4,7 +4,8 @@ import {FC, ReactNode} from 'react';
 export interface Tab {
   id?: string;
   label: ReactNode;
-  content: ReactNode | FC;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  content: FC<any>;
   props?: Record<string, unknown>;
   modalContentClasses?: string;
 }

client/src/javascript/components/modals/settings-modal/UITab.tsx

@@ -54,9 +54,7 @@ const UITab: FC<UITabProps> = ({onSettingsChange}: UITabProps) => {
         <Select defaultID={selectedLanguage} id="language">
           {Object.keys(Languages).map((languageID) => (
             <SelectItem key={languageID} id={languageID}>
-              {Languages[languageID as 'auto'].id != null
-                ? i18n._(Languages[languageID as 'auto'].id)
-                : Languages[languageID as Language]}
+              {languageID === 'auto' ? i18n._(Languages[languageID].id) : (Languages[languageID as Language] as string)}
             </SelectItem>
           ))}
         </Select>

client/src/javascript/ui/components/Button.tsx

@@ -88,7 +88,7 @@ const Button: FC<ButtonProps> = ({
   );
 
   if (wrap) {
-    const WrapperComponent = wrapper as FC;
+    const WrapperComponent = wrapper as FC<{children?: React.ReactNode}>;
     return (
       <WrapperComponent
         {...{

client/src/javascript/ui/components/Form.tsx

@@ -3,6 +3,7 @@ import {Component, FormEvent, ReactNode} from 'react';
 import {getDataFromForm, resetFormData} from './util/forms';
 
 interface FormProps {
+  children?: React.ReactNode;
   className?: string;
   onChange?: ({
     event,