React native: convert class component into functional component

Fortunately, I found a solution about React Native Google Maps with Autocomplete by https://mdmoin07.medium.com/react-native-google-maps-with-autocomplete-45a5617be2f5. I'm able to convert the code using functional components. Initially, my code seems to work to fetch data from Google Maps API but unfortunately, the map is not showing and gives an error.  

ERROR  Warning: Failed prop type: The prop `region.latitude` is marked as required in `MapView`, but its value is `undefined`.

 import React, { useEffect, useRef, useState } from 'react';
    import { View, StyleSheet } from 'react-native';
    //mport RNMapView, { Circle, Marker, Polyline } from 'react-native-maps';
    import { getLocation, geocodeLocationByName } from '../services/location-service';
    //import MapInput from '../services/MapInput';
    import MyMapView from '../components/map/MapView';
    
    import MapInput from '../components/map/MapInput';
    
    
    
    import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
    import MapView, { Marker } from 'react-native-maps';
    
    
    
    function MapContainer({ coords }) {
      /*
      state = {
        region: {}
      };
    */
    
      const [region, setState] = useState({});
    
      useEffect(() => {
        getInitialState();
      }, []);
    
    
      function getInitialState() {
        getLocation().then(
          (data) => {
            console.log(data);
            setState({
              region: {
                latitude: data.latitude,
                longitude: data.longitude,
                latitudeDelta: 0.003,
                longitudeDelta: 0.003
              }
            });
          }
        );
      }
    
      function getCoordsFromName(loc) {
        setState(region);
      }
    
      function onMapRegionChange(region) {
        this.setState({ region });
      }
    
      return (
        <View style={{ flex: 1 }}>
          <View style={{ flex: 1 }}>
            <GooglePlacesAutocomplete
              placeholder='Search'
              minLength={2} // minimum length of text to search
              autoFocus={true}
              returnKeyType={'search'} // Can be left out for default return key 
              listViewDisplayed={false}    // true/false/undefined
              fetchDetails={true}
              onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                getCoordsFromName(details.geometry.location);
                console.log(data);
              }
              }
              query={{
                key: "AIzaSyDNQyEGpDdvqzyJLatwXLI6K-FVvEk9Rew",
                language: 'en',
                components: "country:ph",
              }}
    
              nearbyPlacesAPI='GooglePlacesSearch'
              debounce={300}
            />
          </View>
    
          {
            region['latitude'] ?
              <View style={{ flex: 1 }}>
                <MapView
                  style={{ flex: 1 }}
                  ref={mapRef}
                  region={region.latitude}
                  showsUserLocation={true}
                  onRegionChange={(reg) => onMapRegionChange(reg)} >
    
                  <Marker
                    coordinate={region.latitude} />
                </MapView>
              </View>
    
    
              : null}
        </View>
      );
    }
    
    export default MapContainer;






These codes are class components from the reference I found.



    import React, { useEffect, useRef, useState} from 'react';
    import { View, StyleSheet } from 'react-native';
    //mport RNMapView, { Circle, Marker, Polyline } from 'react-native-maps';
    import { getLocation, geocodeLocationByName } from '../services/location-service';
    //import MapInput from '../services/MapInput';
    import MyMapView from '../components/map/MapView';
    
    import MapInput from '../components/map/MapInput';
    
    
    
    import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
    import MapView, {Marker} from 'react-native-maps';
    
    
    
    
    
    class MapContainer extends React.Component {
      state = {
          region: {}
      };
    
      componentDidMount() {
          this.getInitialState();
      }
    
      getInitialState() {
          getLocation().then(
              (data) => {
                  console.log(data);
                  this.setState({
                      region: {
                          latitude: data.latitude,
                          longitude: data.longitude,
                          latitudeDelta: 0.003,
                          longitudeDelta: 0.003
                      }
                  });
              }
          );
      }
    
      getCoordsFromName(loc) {
          this.setState({
              region: {
                  latitude: loc.lat,
                  longitude: loc.lng,
                  latitudeDelta: 0.003,
                  longitudeDelta: 0.003
              }
          });
      }
    
      onMapRegionChange(region) {
          this.setState({ region });
      }
    
      render() {
          return (
              <View style={{ flex: 1 }}>
                  <View style={{ flex: 1 }}>
            <GooglePlacesAutocomplete
                            placeholder='Search'
                            minLength={2} // minimum length of text to search
                            autoFocus={true}
                            returnKeyType={'search'} // Can be left out for default return key 
                            listViewDisplayed={false}    // true/false/undefined
                            fetchDetails={true}
                            onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                                this.getCoordsFromName(details.geometry.location);
                                console.log(data);
                            }
                            }
                            query={{
                            key: "AIzaSyDNQyEGpDdvqzyJLatwXLI6K-FVvEk9Rew",
                                language: 'en',
                                components: "country:ph",
                            }}
    
                            nearbyPlacesAPI='GooglePlacesSearch'
                            debounce={300}
                        />
                  </View>
    
                  {
                      this.state.region['latitude'] ?
    
    
                          <View style={{ flex: 1 }}>
                         <MapView
                            style={{ flex: 1 }}
                            region={this.state.region}
                            showsUserLocation={true}
                            onRegionChange={(reg) => this.onMapRegionChange(reg)} >
    
                            <Marker
                                coordinate={this.state.region} />
                        </MapView>
                          </View> 
                          
                          
                          : null}
              </View>
          );
      }
    }
    
    export default MapContainer;











Thank you for kindly answering my question. I'm from the Philippines. Maraming Salamat po.