Passing UseState in React Native with typescript to Input box component and updating it onChange

I am having some problems passing the use state to a custom text input component.I want to update the state of symbol everytime a user makes a change in the input box. The use state symbol does not get updated and come back as undefined.

App.tsx

    const App = () => {    const [symbol, setSymbol] = useState('AMD');       function handleSymbolChange() {        setSymbol(symbol);      }    return (<View><AppTextInput placeholder="Symbol" icon="activity" value={symbol}       onTextInputChange= {handleSymbolChange}/></View>  );};    }

AppTextInput.tsx

 interface Props {      icon: string;      placeholder: string;      value: string;      onTextInputChange: any;}    const AppTextInput: React.FC<Props> = ({      icon,      placeholder,      value,      onTextInputChange,    }) => {       const handleChange = (e: any) => {        onTextInputChange(e.target.value);        console.log(e.target.value);      };      return (<View><Icon name={icon} size={20}/><TextInput            style={styles.textInput}            placeholder={placeholder}            value={value}            onChange={handleChange}          /></View>      );    };