async function passed as props, event handler could not call this function - reactjs

Question

I'm passing a async function from App to Header to Form. I cant seems to call that function with submit event handler even with the use of arrow function.
I've tried fat arrow function. The only working way is to move the function down to Form which it work but not ideal as I need the data to be stored in App state. when I console.log(result) I get undefined
class Form extends Component {
constructor(props){
super(props);
this.state = {value: ''};
}
handleChange=(e)=> {
this.setState({value: e.target.value});
}
handleSubmit= (e)=>{
e.preventDefault();
const value = this.state.value;
this.props.getResult(value)
}
render(){
return (
<form className="search"onSubmit={this.handleSubmit}>
<input type="text" className="search__field" placeholder="Search over 1,000,000 recipes..." value={this.state.value} onChange={this.handleChange}/>
<button className="btn search__btn"></button>
</form>
);
}
}
App component
class App extends Component {
constructor(props) {
super(props);
this.state = {
search:[],
}
}
getResult = async (query) =>{
try {
const key = 'key';
const res = await axios(`https://www.food2fork.com/api/search?key=${key}&q=${query}`);
const result = res.data.recipes;
console.log(result)
// if(result) this.setState({search: result});
}
catch (err) {
alert(err);
}
}
render() {
return (
<div className="App">
<div className="container">
<Header getResult={this.getResult}/>
</div>
</div>
);
}
}
Header
class Header extends Component {
constructor(props) {
super(props);
this.getResult = this.props.getResult;
}
render(){
return (
<div className="header">
<Logo />
<Form getResult={this.getResult}/>
<Like />
</div>
)
}
}