Implemented the GroupProvider in the Root.jsx

client/src/common/layouts/Root/Root.jsx

@@ -3,16 +3,29 @@ import "./styles.sass";
 import Footer from "@/common/components/Footer";
 import {useOutlet} from "react-router";
 import Background from "@/common/components/Background";
+import {socket} from "@/common/utils/socket.js";
+import {useEffect} from "react";
+import {GroupProvider} from "@/common/contexts/GroupContext.jsx";
 
 export const Root = () => {
     const outlet = useOutlet();
 
+    useEffect(() => {
+        socket.connect();
+
+        return () => {
+            socket.disconnect();
+        }
+    }, []);
+
     return (
         <div className="root">
             <Header />
 
             <main>
-                {outlet}
+                <GroupProvider>
+                    {outlet}
+                </GroupProvider>
             </main>
 
             <Footer />