Fix rendering issues with plugins

Plugins wouldn't render if the number of hooks changed. This was because
the dynamic content substitution would create variable number of hooks.
This has been fixed by creating an element instead of placing content.

src/Core.js

@@ -3,19 +3,19 @@ import { useSelector, useDispatch } from "react-redux";
 import { Box, Button, Clock } from "grommet";
 
 import { setPlugin, selectCore } from "./coreSlice";
-import * as plugins from "./plugins";
+import plugins from "./plugins";
 
 function Core() {
 	const coreState = useSelector(selectCore);
 	const dispatch = useDispatch();
-	const plugin = plugins.default[coreState.plugin];
+	const plugin = plugins[coreState.plugin];
 	const props = {
 		data: coreState.data,
 		close: () => dispatch(setPlugin(false))
 	};
 	const dummyButtons = ["Maps", "Home Devices", "Phone"];
 	return <>
-		{plugin ? plugin(props) : (
+		{plugin ? React.createElement(plugin, props, null) : (
 			<Box
 				align="center"
 				background="light-1"

src/WebSocket.js

@@ -17,8 +17,8 @@ function WebSocketProvider({ children }) {
 		socket = io.connect(WS_BASE);
 
 		socket.on("switchPlugin", (payload) => {
+			dispatch(setData(payload.data || {}));
 			dispatch(setPlugin(payload.plugin));
-			dispatch(setData(payload.data));
 			if (payload.time) {
 				setTimeout(() => {
 					dispatch(setData({}));