How can I load the map only when the async function is done getting the location from the device ? It loads my map first and I get an error because location is not defined yet. Here is my code

export default function Map() {
    const [location, setLocation] = useState(null);
    const [errorMsg, setErrorMsg] = useState(null);
  
    useEffect(() => {
      (async () => {
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
          setErrorMsg('Permission to access location was denied');
          return;
        }
        let location = await Location.getCurrentPositionAsync({});
        setLocation(location);
      })();
    }, [])
    return (
        <MapView
        style={{ flex: 1, marginTop: 40 }}
        initialRegion={{
            latitude: location.coords.latitude,
            longitude: location.coords.latitude,
            latitudeDelta: 0.1,
            longitudeDelta: 0.1,
        }}
        />
        
    );
}

Thank you for your help mates!