Mostly working just have to fix react router and next.js

Author: Solodt55

src/app/components/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MemoryRouter as Router } from 'react-router-dom';
+import { Router } from 'react-router-dom';
 import MainContainer from '../containers/MainContainer';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from './theme';

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import JSONTree from 'react-json-tree';
+import { JSONTree } from 'react-json-tree';
 
 /*
   Code that show's the tooltip of our JSON tree

src/app/components/StateRoute/History.tsx

@@ -3,11 +3,12 @@
 // @ts-nocheck
 import React, { useEffect } from 'react';
 // formatting findDiff return data to show the changes with colors, aligns with actions.tsx
-import { diff } from 'jsondiffpatch';
-import { HtmlFormatter } from 'jsondiffpatch/lib/formatters';
-// import * as jsondiffpatch from 'jsondiffpatch';
 // import { diff } from 'jsondiffpatch';
-// import formatters from 'jsondiffpatch/src/formatters';
+// import { HtmlFormatter } from 'jsondiffpatch/lib/formatters';
+// import * as jsondiffpatch from 'jsondiffpatch';
+import { diff } from 'jsondiffpatch';
+// import jsondiffpatch from 'jsondiffpatch/formatters';
+const jsondiffpatch = require('jsondiffpatch');
 import * as d3 from 'd3';
 import { DefaultMargin } from '../../FrontendTypes';
 import { useDispatch } from 'react-redux';
@@ -158,9 +159,8 @@ function History(props: Record<string, unknown>): JSX.Element {
       statelessCleaning(snapshots[index - 1]),
       statelessCleaning(snapshots[index]),
     );
-
     const changedState = findStateChangeObj(delta); // determines if delta had any stateful changes
-    const html = HtmlFormatter.format(changedState[0]); // formats the difference into html string
+    const html = jsondiffpatch.formatters.format(changedState[0]); // formats the difference into html string
     return html; // return html string
   }
 

src/app/components/StateRoute/Tree.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import JSONTree from 'react-json-tree'; // React JSON Viewer Component
+import { JSONTree } from 'react-json-tree'; // React JSON Viewer Component
 import { setCurrentTabInApp } from '../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 import { TreeProps } from '../../FrontendTypes';