firebase realtime database doesn't work as expected

Question

I'm a junior dev, so please be easy with me.

My goal is to auth an user anonymously when he open the homepage, then if all went ok, he fetch the data from the real time database, but only if the uid match is ok!

He there are my rules:

{
  "rules": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "false",
      }
  }
}

My database is structured like this https://ibb.co/jkRBCsF

---

The anonymous sign in is on the context

export const AuthContextProvider = ({ children }: Props) => {
  React.useEffect(() => {
    signInAnonymously(auth)
      .then(() => {
        // Signed in..
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ...
      });
  }, []);

  const values = {};

  return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>;
};

Then when I open a page for example '/crew' getStaticProps launches fetchPlanetInfo

export const getStaticProps: GetStaticProps = async () => {
  const planetInfo = await fetchPlanetsInfo("destinations");

  return {
    props: {
      data: planetInfo,
    },
  };
};

export function fetchPlanetsInfo(query: string) {
  let dataArr: any = [];

  try {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        const uid = user.uid;
        const databaseCall = ref(db, uid + "/" + query);

        onValue(databaseCall, (snapshot) => {
          const data = snapshot.val();
          dataArr.push(data);
        });
      } else {
        console.log("user is signout");
        // User is signed out
        // ...
      }
    });
  } catch (error) {
    console.log(error);
  }

  return dataArr.flat();
}

I tried to figure out where is the error but I didn't find out the solution

My problem is that the data is not get from the database. fetchPlanetsInfo return null. I think my rules is written wrong.