I am building an app with react native, in which I need to pull data from a database (firebase) before rendering a page. I am having a hard time getting variables to update before the return is called. I also cannot change the default export to a class, since I am planning on using a feature (image picker) that requires hooks. I have included similar code to what I have below.

export default function ProfileScreen(){
  let displayName = ""
  let skillLevel = "Iron 2"
  let mainCharacter = "Astra"

    useEffect(() => {

      populateFieldsFromDB()

    }, [])


  const populateFieldsFromDB = async () => {
    let userUUID = await SecureStore.getItemAsync("userUUID")
    if(userUUID != null){
      const user = await firebase.firestore().collection("Users").doc(userUUID).get()
      if("displayName" in user.data()){
        displayName = user.data().displayName
      }
      if("rank" in user.data()){
        skillLevel = user.data().rank
        console.log(skillLevel)
      }
      if("main" in user.data()){
        mainCharacter = user.data().main
      }
    }
  }

return(
        <TextInput
          style={styles.textField}
          onChangeText={text => onDisplayNameChange(text)}
          defaultValue={displayName}
          placeholder='Enter your Riot Name and discriminator (i.e. John#1234)'
          keyboardAppearance="dark"
          placeholderTextColor="#003800"
        />
)

In this case, the default value of the text input is the empty string, not what gets updated after the populateFieldsFromDB() call. Any help would be greatly appreciated!