I have a setup to listen to real-time changes in firebase database:

This is how path looks like: Path = funfuse/users/connected-users/AfYXmJroEKQwnhiFXXXXXiyblti22

This is how my database is structured:

When I try to add an entry to the last child (ie. connected-users) it updates in db but even though I have the app running on my web browser, I don't get any log messages for the update:

 useEffect(() => {
    if (isLoggedIn && firebaseToken !== '') {
      const path = `${rdb_paths.funfuse_connected_users}/${user?.uid ?? ''}`;
      const connectionsRef = ref(rdb, path);
      console.log('Path = ', path);

      onValue(connectionsRef, (snapshot) => {
        console.log('Values = ', snapshot.val());
      });
      return () => {
        console.log('Switching off listening');
        off(connectionsRef);
      };
    }
  }, [firebaseToken, isLoggedIn, user?.uid]);

Am I doing something wrong here? Why am I not able to get the updates. Here are my security rules:

{
  "rules": {
    "funfuse": {
      "users": {
        "requests-users": {
          "$uid": {
            ".read":"$uid === auth.uid && auth.token.email_verified === true",
            ".write":"$uid === auth.uid && auth.token.email_verified === true"
          }
        },
        "requested-users": {
          "$uid": {
            ".read":"$uid === auth.uid && auth.token.email_verified === true",
            ".write":"$uid === auth.uid && auth.token.email_verified === true"
          }
        },
       "connected-users": {
        "$uid": {
          ".read":"$uid === auth.uid && auth.token.email_verified === true",
          ".write":"$uid === auth.uid && auth.token.email_verified === true"
        }
      } 
      }
    }
  }
}

I did run a simulation to read and write data and it worked fine. Do I need to add additional rule for listening to the data updates?