Weird realtime subscription behaviour

[shlangster]

Hello, I'm facing very annoying issue. Realtime not receiving events after successful subscription. But it starts receiving events when subscribed twice.
This code works well but triggered twice:

useEffect(() => {
   const setupRealtime = async () => {
     console.log(`Creating subscription`);
     const channel = supabase
       .channel('contracts-realtime-channel')
       .on(
         "postgres_changes",
         { event: "*", schema: "public", table: "Contract" },
         async (payload) => {
           console.log("Realtime update:", payload);
         }
       )
       .subscribe((status,err) => console.log("Realtime status:", status, err));
     channelRef.current = channel;
   };
   setupRealtime();
   return () => {
     if (channelRef.current) {
       supabase.removeChannel(channelRef.current);
     }
     channelRef.current = null;
   };
 }, [loading]);

If I remove dependency to loading or add if (loading) return to avoid multiple invocation then the subscription stops receiving events. What's going on?
Also if I add a delay of 1 second then it fails to subscribe with this error - mismatch between server and client bindings for postgres changes.