React Native Maps Rendering current location breaks when I restart App

currently with my app I have it so that it asks the user for location perms and if they accept it then fetches their location. Currently however when I render the map with a set region it works and when the change the code to their location that the code fetches it changes to their location. When i reset the app or Expo the app crashes because the state is undefined. How can I get passed this? Here is the code:

const Map = () => {

  // Get permissons for using user location
  const [location, setLocation] = useState();
  
  useEffect(() => {
    const getPermissions = async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.log("Please grant location permissions");
        return;
      }

      let currentLocation = await Location.getCurrentPositionAsync({});
      setLocation(currentLocation.coords);

      console.log("Location:");
      console.log(currentLocation);
    };
    
    getPermissions();

  }, []);

    return(
//Will change this Mapview to users current location
//Will display about 0 - 30 miles away from used depending on user settings.
    <MapView 
    initialRegion={
      { 
          //I when I restart the app with latitude and longitude as latitude: latitude: location.coords.latitude longitude: location.coords.longitude app crashes cause the state is cleared. 
          latitude: 24.8607,
          longitude: 67.0011,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
     style ={styles.map}/>
  );
}

I want the app to constantly be set to the users location even if the app is restarted

Since you haven't defined an initial value for your location state, it is initialized with a null value. Thus location.coords is undefined.

To fix the issue, when passing the latitude and longitude props to the MapView component, you can check if location isn't null or undefined, and pass its values to the MapView component.

The Map won't re-render if you change the initialRegion prop since it is used for initial rendering. To update the Map location after the location state is updated, you can use the region prop. It will cause a render in MapView when its value is changed. And the new region will be shown.

This can be approached by rewriting the props as below:

<MapView 
    initialRegion={{ 
          latitude: !!location ? location.coords.latitude : 24.8607,
          longitude: !!location ? location.coords.longitude : 67.0011,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
     region={{ 
          latitude: !!location ? location.coords.latitude : 24.8607,
          longitude: !!location ? location.coords.longitude : 67.0011,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
     style ={styles.map}
/>

This way, once the permission is acquired and the state is updated with new values, the MapView will receive the new props and renders.

You should use initialRegion for showing a default region before the location is updated. After that, the region prop can update the view.