Why isn’t data being pulled from database when I load the page?

I have a button that’s supposed to run a function when loaded.

<LikeButtonStyle onLoad={getUserData} onClick={addInfo}>

the function it’s supposed to run is

async function getUserData() {
    const docSnap = await getDoc(userCollectionRef);
    if (docSnap.exists()) {
      setUser(docSnap.data().username);
      setUserLikes(docSnap.data().likePost);
      if (userLikes == 'no') {
        setLikeCount('0');
      } else {
        setLikeCount('1');
      }
    }
  }

So the idea is that when the page loads, it grabs the user data which is made up of two fields username and likePost. Once it grabs that data it’s supposed to set that data in state.

It uses this data to count a 0 or 1 depending if the user has liked it or not.