Feature/update dependency react to v18.x (#346)

* Update dependency "react" to v18.x

Update to v18.2.0

* Update dependency "react" to v18.x - Fix some dependency version issue

Something caused weird tsc issues, most likely a version mismatch since it got fixed by doing a clean install (deleting node_modules folder, yarn.lock and clearing the cache) of the dependencies

* Update dependency "react" to v18.x - Fix "i18n" tsc issues

* Update dependency "react" to v18.x - Fix tsc issue

Typography can only have a single child

* Update dependency "react" to v18.x - Prevent build warning

TODO: migrate to Vite

Gets used without being declared as a dependency.
Since CRA is unmaintained this will not get fixed.

* Update dependency "react" to v18.x - Use "createRoot"

* Update dependency "react" to v18.x - Fix dnd in strict mode

src/components/reader/pager/DoublePagedPager.tsx

@@ -7,11 +7,11 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
 import { Box } from '@mui/material';
 import Page from 'components/reader/Page';
 import DoublePage from 'components/reader/DoublePage';
 import { IReaderProps } from 'typings';
+import { createRoot } from 'react-dom/client';
 
 const isSpreadPage = (image: HTMLImageElement): boolean => {
     const aspectRatio = image.height / image.width;
@@ -58,8 +58,11 @@ export default function DoublePagedPager(props: IReaderProps) {
     }
 
     function displayPages() {
+        const container = document.getElementById('display');
+        const root = createRoot(container!);
+
         if (pagesDisplayed.current === 2) {
-            ReactDOM.render(
+            root.render(
                 <DoublePage
                     key={curPage}
                     index={curPage}
@@ -67,10 +70,9 @@ export default function DoublePagedPager(props: IReaderProps) {
                     image2src={pages[curPage + 1].src}
                     settings={settings}
                 />,
-                document.getElementById('display'),
             );
         } else {
-            ReactDOM.render(
+            root.render(
                 <Page
                     key={curPage}
                     index={curPage}
@@ -78,7 +80,6 @@ export default function DoublePagedPager(props: IReaderProps) {
                     onImageLoad={() => {}}
                     settings={settings}
                 />,
-                document.getElementById('display'),
             );
         }
     }