Using handleTextChange in a custom search bar component in typescript, google autocomplete

I want the search bar to behave like a normal search bar, to retrieve information as you type.

Currently, when I type something in the search bar, it deletes whatever I type immediately after I type it. I know there is something wrong with the handleTextChange prop.

When I try to pass in the handleTextChange prop inside the SearchBarCustom, it is undefined.

I'd like it so whenever I type something, that corresponding location comes up in the search field.

Any help would be appreciated :)

const SearchBarCustom = (props) => {  const [value, setValue] = useState('');  return <SearchBar value={value} onChangeText={setValue} {...props} />;};export default class SearchScreen extends React.Component {  render() {    return (<ScrollView        style={styles.container}        contentInsetAdjustmentBehavior="automatic"        stickyHeaderIndices={[0]}><View><GoogleAutoComplete            apiKey={apiKey}            debounce={500}            minLength={1}            queryTypes={'(cities)'}>            {({ handleTextChange, locationResults }) => (<React.Fragment><View style={styles.inputWrapper}><SearchBarCustom                    onChangeText={handleTextChange} // POTENTIAL ERROR HERE                    placeholder="Search"                    containerStyle={{ backgroundColor: '#f3f2f8' }}                    inputContainerStyle={{                      backgroundColor: '#e3e3e9',                      height: 30,                    }}                    placeholderTextColor="#96969b"                    platform="ios"                  /></View><ScrollView>                  {locationResults.map((el) => (<LocationItem {...el} key={el.id} />                  ))}</ScrollView></React.Fragment>            )}</GoogleAutoComplete></View></ScrollView>    );  }}