fix: upgrading dependencies to fix the build issue

package.json

@@ -10,23 +10,23 @@
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
     "ajv": "6.10.2",
     "brace": "0.11.1",
     "crypto-js": "^4.0.0",
     "jsoneditor": "^9.1.8",
     "jsoneditor-react": "^3.1.0",
     "jwt-decode": "^3.1.2",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-device-detect": "^1.15.0",
     "react-diff-view": "^2.4.7",
     "react-diff-viewer": "^3.1.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-qr-code": "^1.1.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "^5.0.1",
     "react-tooltip": "^4.2.13",
     "typescript": "^4.0.3",
     "web-vitals": "^0.2.4"

src/component/certification-decoder.tsx

@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function CertificationDecoder() {
 
     const [inputText, setInputText] = useState<string>('Test');
-    const [decodedText, setDecodedText] = useState<{}>({})
+    const [, setDecodedText] = useState<{}>({})
     const classes = useStyles();
 
     const clearInputText = () => {

src/component/header.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {useHistory} from "react-router-dom";
 import ReactTooltip from "react-tooltip";
 import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';

src/component/json-editor.tsx

@@ -1,59 +1,55 @@
-import React, {useState} from "react";
+import React from "react";
 // import the react-json-view component
-import {JsonEditor as Editor} from "jsoneditor-react";
+import { JsonEditor as Editor } from "jsoneditor-react";
 //import "jsoneditor-react/es/editor.min.css";
 import Ajv from "ajv";
 import ace from "brace";
 import "brace/mode/json";
 import "brace/theme/github";
-import {createStyles, makeStyles, Theme, Typography} from "@material-ui/core";
+import { createStyles, makeStyles, Theme } from "@material-ui/core";
 import "./json-editor.css";
 
-
 const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        root: {
-            flexGrow: 1,
-            width: '100%',
-        },
-        button: {
-            align: 'center',
-            margin: '5px'
-        },
-        title: {
-            flexGrow: 1,
-            textAlign: "left",
-            color: "black"
-        },
-
-    }),
+  createStyles({
+    root: {
+      flexGrow: 1,
+      width: "100%",
+    },
+    button: {
+      align: "center",
+      margin: "5px",
+    },
+    title: {
+      flexGrow: 1,
+      textAlign: "left",
+      color: "black",
+    },
+  })
 );
 
 export default function JsonEditor(props) {
-    const classes = useStyles();
-
-    const ajv = new Ajv({allErrors: true, verbose: true});
-
-
-    return (
-
-        <div className={classes.root}>
-            <br/>
-            <Editor
-                name={'root'}
-                value={props.value ? props.value : {"key": "value"}}
-                mode={props.mode ? props.mode : 'text'}
-                search={true}
-                history={true}
-                statusBar={true}
-                navigationBar={true}
-                allowedModes={props.allowedModes ? props.allowedModes : ['text', 'view', 'tree']}
-                ace={ace}
-                theme="/ace/theme/github"
-                ajv={ajv}
-            />
-        </div>
-
-
-    );
+  const classes = useStyles();
+
+  const ajv = new Ajv({ allErrors: true, verbose: true });
+
+  return (
+    <div className={classes.root}>
+      <br />
+      <Editor
+        name={"root"}
+        value={props.value ? props.value : { key: "value" }}
+        mode={props.mode ? props.mode : "text"}
+        search={true}
+        history={true}
+        statusBar={true}
+        navigationBar={true}
+        allowedModes={
+          props.allowedModes ? props.allowedModes : ["text", "view", "tree"]
+        }
+        ace={ace}
+        theme="/ace/theme/github"
+        ajv={ajv}
+      />
+    </div>
+  );
 }

src/component/side-navigation.tsx

@@ -58,6 +58,7 @@ export default function AppDrawer({selectedOperation, openClippedDrawer}) {
     const history = useHistory();
     const [selected, setSelected] = useState(selectedOperation);
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => handleOnClick(selectedOperation), [selectedOperation]);
 
     const handleOnClick = (operation) => {

src/component/text-diff-viewer.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from "react";
 // import the react-json-view component
-import {Button, createStyles, Grid, makeStyles, TextField, Theme} from "@material-ui/core";
+import {Button, createStyles, Grid, makeStyles, Theme} from "@material-ui/core";
 import ReactDiffViewer from 'react-diff-viewer';