How to use asyncStorage inside useEffect

I'm building a mobile game using react native and I'm trying to retrieve the best value storage on it to display on the screen. The problem is that it seems that react native is rendering the screen before it retrieves the value and then it doesn't re-render when the value is updated using setBest(), so no value is displayed. Here is the code:

  const navigation = useNavigation()
  const [result, setResult] = useState('')
  const [best, setBest] = useState('')

  
  
  useEffect(() => {
    const Storage = async (key,value) => {
     await AsyncStorage.setItem(key,value)
    }
    const Retrieve = async (key) => {
      const value = await AsyncStorage.getItem(key)
      setBest(()=>value)
   
    }

    Retrieve('1').catch(console.error)
    setResult(route.params.paramKey)

    if(route.params.paramKey>best){
      var aux = result.toString()
       Storage('1',aux)
      console.log(best)
}
  }, [])
  


  return (
    <View style={styles.container}>
      <View style={styles.textView}>
        <Text style={styles.tituloText}>Melhor pontuação</Text>
        <Text style={styles.tituloText}>{best}</Text>
        <Text style={styles.tituloText}>Sua pontuação</Text>
        <Text style={styles.resultText}>{result}</Text>

        <View style={styles.viewBtn}>

          <TouchableOpacity style={styles.viewBack} onPress={() => navigation.navigate('Modo1')}>
            <Icon style={styles.iconBack} name="backward" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.viewHome} onPress={() => navigation.dispatch(StackActions.popToTop)}>
            <Icon style={styles.iconBack} name="home" />
          </TouchableOpacity>
        </View>
      </View>

    </View>
  );
}

Thanks for the help guys! I've been struggling with this for days and any help will be appreciated!