fix: generic

Author: tmm

docs/pages/documentation/realtime/use-realtime.md

@@ -16,6 +16,8 @@ function Page() {
 
 You can pass a function for comparing subscription event changes. By default, the compare function checks the `id` field.
 
+When using your own compare function, you typically want to compare unique values:
+
 ```js highlight=6
 import { useRealtime } from 'react-supabase'
 

src/hooks/realtime/use-realtime.ts

@@ -25,9 +25,13 @@ export type UseRealtimeCompareFn<Data = any> = (
     payload: Data,
 ) => boolean
 
+type CompareFnDefaultData<Data> = Data & { id: any }
+
 export function useRealtime<Data = any>(
     table: string,
-    compareFn: UseRealtimeCompareFn = (a, b) => a.id === b.id,
+    compareFn: UseRealtimeCompareFn<Data> = (a, b) =>
+        (<CompareFnDefaultData<Data>>a).id ===
+        (<CompareFnDefaultData<Data>>b).id,
 ): UseRealtimeResponse<Data> {
     if (table === '*')
         throw Error(