fix: resolve hydration and suspense errors

src/components/index/privacy.tsx

@@ -4,12 +4,12 @@ import { Button, Group, Title } from '@mantine/core';
 
 import { IconBrandGithub } from '@tabler/icons-react';
 
-const PrivacyFeature = (props: { name: string; key: number }) => {
-  const { name, key } = props;
+const PrivacyFeature = (props: { name: string; itemKey: number }) => {
+  const { name, itemKey } = props;
   return (
     <div
-      key={key}
-      className={`${key !== 0 && 'mt-8'} sm:mt-0 privacy-feature h-[100px] min-w-[80px]`}
+      key={itemKey}
+      className={`${itemKey !== 0 && 'mt-8'} sm:mt-0 privacy-feature h-[100px] min-w-[80px]`}
     >
       <div className="mt-24">
         <p>{name}</p>
@@ -60,7 +60,7 @@ export const Privacy = () => {
           'Anonymized Analytics',
           'Open Source',
         ].map((feature, index) => (
-          <PrivacyFeature name={feature} key={index} />
+          <PrivacyFeature name={feature} key={index} itemKey={index} />
         ))}
       </div>
     </section>

src/hooks/use-tracking.hook.ts

@@ -1,4 +1,4 @@
-import { startTransition, useEffect } from 'react';
+import { startTransition, useEffect, useState } from 'react';
 
 import { env } from 'fpp/env';
 
@@ -16,21 +16,29 @@ export const useTrackPageView = (
   route: keyof typeof RouteType,
   roomId?: number,
 ) => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
   const userId = useLocalstorageStore((state) => state.userId);
   const setUserIdLocalStorage = useLocalstorageStore(
     (state) => state.setUserId,
   );
   const setUserIdRoomState = useLocalstorageStore((state) => state.setUserId);
 
   useEffect(() => {
-    sendTrackPageView({
-      userId,
-      route,
-      roomId,
-      setUserIdLocalStorage,
-      setUserIdRoomState,
-    });
-  }, [route, roomId]);
+    if (hasMounted) {
+      sendTrackPageView({
+        userId,
+        route,
+        roomId,
+        setUserIdLocalStorage,
+        setUserIdRoomState,
+      });
+    }
+  }, [hasMounted, route, roomId]);
 };
 
 export const sendTrackPageView = ({