Revert "update dependences and demo error"

This reverts commit d25a58e.

Author: martins5225

app/src/components/main/DemoRender.tsx

@@ -1,12 +1,11 @@
-import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
 import React, { useEffect, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import { Component } from '../../interfaces/Interfaces';
 import ReactDOMServer from 'react-dom/server';
-import { RootState } from '../../redux/store';
+import { useDispatch, useSelector } from 'react-redux';
 import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
 
 // DemoRender is the full sandbox demo of our user's custom built React components. DemoRender references the design specifications stored in state to construct
 // real react components that utilize hot module reloading to depict the user's prototype application.
@@ -54,21 +53,16 @@ const DemoRender = (): JSX.Element => {
   `;
 
   //Switch between components when clicking on a link in the live render
-window.onmessage = (event) => {
-  if (event.data === undefined) return;
-
-  const data = event.data.data;
-  if (typeof data !== 'string') return; // Make sure data is a string
-
-  const component: string = data.split('/').at(-1);
-  const componentId =
-    component &&
-    state.components?.find((el) => {
-      return el.name.toLowerCase() === component.toLowerCase();
-    })?.id; // Use optional chaining for state.components
-  componentId && dispatch(changeFocus({ componentId, childId: null }));
-};
-
+  window.onmessage = (event) => {
+    if (event.data === undefined) return;
+    const component: string = event.data.data?.split('/').at(-1);
+    const componentId =
+      component &&
+      state.components?.find((el) => {
+        return el.name.toLowerCase() === component.toLowerCase();
+      }).id;
+    componentId && dispatch(changeFocus({ componentId, childId: null }));
+  };
 
   //  This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
   //   Material UI is utilized to incorporate the apporpriate tags with specific configuration designs as necessitated by HTML standards.