realtime-js channel subscription status is TIMED_OUT

  useEffect(() => {
    if (!userId) {
      console.log('No user ID available for subscription');
      return;
    }

    console.log('Setting up subscription for user ID:', userId);

    // Clear any existing subscriptions to avoid duplicate listeners
    supabase.removeAllChannels();

    // Set up a new channel subscription
    const channel = supabase.channel(

);

    channel.on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'users', filter: 

 }, (payload) => {
      console.log('All updates on users table when username is Realtime: ', payload)
      if (payload.new && (payload.new.user_id === userId || payload.new.matched_user_id === userId)) {
        setMatchedUser(payload.new.matched_user_id);
      }
    })

    channel.subscribe((status, error) => {
      console.log(

, error ? 

 : '');
      if (status === 'SUBSCRIBED') {
        console.log('Successfully subscribed to the channel');
      }
    });

    // Return a cleanup function to unsubscribe from the channel
    return () => {
      console.log('Removing channel subscription for user ID:', userId);
      supabase.removeChannel(channel);
    };
  }, [userId]);