refactor: clean up code in various components; streamline material properties and improve state management

app/src/components/layout/sidebarRight/Header.tsx

@@ -28,15 +28,13 @@ const Header: React.FC = () => {
             <div className="other-guest">+{guestUsers.length - 3}</div>
           )}
           {guestUsers.slice(0, 3).map((user, index) => (
-            <>
-              <div
-                key={index}
-                className="user-profile"
-                style={{ background: getAvatarColor(index) }}
-              >
-                {user.userName[0]}
-              </div>
-            </>
+            <div
+              key={index}
+              className="user-profile"
+              style={{ background: getAvatarColor(index) }}
+            >
+              {user.userName[0]}
+            </div>
           ))}
         </div>
         <div className="user-profile-container">