I am using react-native-google-places-autocomplete for a filter menu on a project. While I am inputting text into the <GooglePlacesAutocomplete/> object I want to track the text input with a state variable called 'address'. To do that I used a predefined function preProcess (ideally I would use onChangeText, but <GooglePlacesAutocomplete/> does not support it). Fortunately the state variable does update when input text is changed; however, after it updates, I receive a TypeError: undefined is not an object (evaluating 'stateText.length'). I've read every blog and stack overflow chain dealing with similar errors and haven't found why this error pops up with my specific application. Any help would be greatly appreciated.

import React, { useState, useEffect } from "react";
import {View, Text} from "react-native";
import Screen from "../../../../components/Screen";
import styles from "./LocationStyles";
import colors from "../../../../config/colors";

import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import Geocoder from "react-native-geocoding";
import SuggestionRow from "./SuggestionRow";

function LocationScreen(props) {
  const [address, setAddress] = useState("");

  Geocoder.init("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", { language: "en" });

  useEffect(() => {
    console.log(`address is ${address}`);
  }, [address]);

  return (
    <Screen style={styles.screen}>
      <View style={{ marginTop: 25 }}>
        <Text style={{ height: 25, fontSize: 14 }}>Street*</Text>
        <View style={{ height: 100, position: "relative", zIndex: 10 }}>
          <GooglePlacesAutocomplete
            preProcess={(value) => setAddress(value)}
            minLength={5}
            debounce={200}
            enablePoweredByContainer={false}
            onPress={(data, details = null) => {
              Geocoder.from(data.description)
                .then((json) => {
                  var location = json.results[0].geometry.location;
                })
                .catch((error) => console.warn(error));
                setAddress(`${data.terms[0].value} ${data.terms[1].value}`);
            }}
            styles={{
              textInputContainer: {
                borderWidth: 1,
                borderRadius: 10,
                overflow: "hidden",
                paddingTop: 3,
                borderColor: colors.transparentPrimary,
                height: 45,
              },
              textInput: {
                height: 38,
                color: colors.black,
                fontSize: 14,
              },
            }}
            query={{
              key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
              language: "en",
              types: "address",
              fields: "geometry",
              components: "country:us",
            }}
            renderRow={(item) => <SuggestionRow item={item} />}
          />
        </View>
        <Text style={{ color: colors.medium, fontSize: 10, marginTop: -50 }}>
          e.g. 100 Larch Ave
        </Text>
      </View>
    </Screen>
  );
}

export default LocationScreen;