React Native - Problema com Hooks

import React, { useEffect, useState } from "react";
import { View } from "react-native";
import MapView from 'react-native-maps';
import * as Location from 'expo-location';
import AlertArea from "./AlertArea";
import styles from "./style";

export default function Maps(){

    const [latitude, setLatitude] = useState(0)
    const [longitude, setLongitude] = useState(0)
    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({})

            let latitude = JSON.parse(location.coords.latitude)
            let longitude = JSON.parse(location.coords.longitude)

            setLatitude(latitude)
            setLongitude(longitude)
        })()
    },[])

    console.log(latitude)
    console.log(longitude)

    return(
        <View style={styles.content}>
            <MapView style={styles.map} initialRegion={{
                latitude: latitude,
                longitude: longitude,
                latitudeDelta: 0.0122,
                longitudeDelta: 0.0121,
            }} showsUserLocation></MapView>
            <AlertArea/>
        </View>
    )
}