React: Promise resolves inside of async function but pending when trying to access it from outside [duplicate]

I want to access a pocketbase database, but I’m struggling for 2 days now trying to make it work. Ideally I want a custom hook for that, but I’m unable even getting it to work without it.

I tried with an async function:

  async function getData() {
      const id = pb.authStore.model.id;
      const userdata = await pb.collection("users").getOne(id);
  }

And with a const:

  const getData = async () => {
      const id = pb.authStore.model.id;
      const userdata = await pb.collection("users").getOne(id);
  };

Both ways I’m able to access userdata from inside the function, but when I try:

  const data = getData();
  console.log(data);

From outside the promise is pending. Also why does it even return anything, even though I dont do a return userdata?

My custom hook try:

export default function useData() {
      const id = pb.authStore.model.id;
      const [data, setData] = useState();

      async function getData() {
          const userdata = await pb.collection("users").getOne(id);
          setData(userdata);
      }

      const isLoggedIn = pb.authStore.isValid;
      if (isLoggedIn) getData();

      return { data, getData };
}

I’m trying to access the hook via:

const [data, setData] = UseData();

but then the page wont render somehow.