'Expo location returns undefined

my useLocation hook returns undefined when I wanna use it. Why its not working?

import {useState, useEffect} from "react";
import * as Location from "expo-location";

export default () => {
    const [location, setLocation] = useState();

    const getLocation = async () => {
        try {
            const {granted} = await Location.requestForegroundPermissionsAsync();
            if (!granted) return;
            const {
                coords: {latitude, longitude},
            } = await Location.getCurrentPositionAsync();
            setLocation({latitude, longitude});
        } catch (error) {
            console.log(error);
        }
    };

    useEffect(() => {
        getLocation().catch(err => console.log(err));
    }, []);

    return location;
}

import React from 'react'
import {StyleSheet, ActivityIndicator, StatusBar} from 'react-native'
import {SafeAreaView} from 'react-navigation'
import MapView from 'react-native-maps'
import useLocation from "../hook/useLocation";

const MapScreen = () => {
    const currentLocation = useLocation(); // it always returns undefined 

    if (!currentLocation) return <ActivityIndicator size="large" style={{marginTop: 200}} color="#121212"/>

    return (
        <SafeAreaView

            style={styles.container}
        >

            <StatusBar
                translucent
                backgroundColor={'#121212'}
                barStyle='light-content'
            />

            <MapView
                style={styles.map}
                initialRegion={{
                    ...currentLocation.coords,
                    latitudeDelta: 0.01,
                    longitudeDelta: 0.01
                }}
            />
        </SafeAreaView>
    )
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source