When I present my map it never loads the initRegion somewhy, it always starts with the african region. The loading that is visible in the gif is coming from an API call, and I stop it when the get request was succesfull.

Heres my code:

const [mapRegion, setMapRegion] = useState(null);

    const getLocation = async ()=>{
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        Alert.alert(
          'Whoops!',
          'Az alkalmazás nem kapott hely információ engedélyt. Ezt könnyen orvosolhatod telefonod beállításiban. \n\nSzeretnéd most bekapcsolni?',
          [
            {text: 'Igen', onPress: () => openSettings()},
            {text: 'Nem', style: 'cancel'},
          ],
          { cancelable: true }
        )
        return;
      }

      let location = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Highest, maximumAge: 10000}); //accuracy: Location.Accuracy.Highest, maximumAge: 10000
      setUserPosition(location);

      let mapRegion = {
        latitude:location.coords.latitude,
        longitude:location.coords.longitude,
        latitudeDelta: .01,
        longitudeDelta: .01}

      setMapRegion(mapRegion)
    }

    useEffect(() => {
      getLocation()
    }, []);
 return(  


    <View style={styles.container}>
        <MapView style={styles.map}
        provider={PROVIDER_GOOGLE}
        region={mapRegion}
        initialRegion={{latitude:47.090417,longitude:19.234115,latitudeDelta: 5,longitudeDelta: 5}}
        showsUserLocation={true}
        showsCompass={true}
        >
        </MapView>
</View>
)