React Native useEffect API Call - react-native

Question

I'm working on an App, which has a search function / page. Now I want some information (an array of meals, not that important) to be loaded when the page opens and then via props given to the subpages from the root search site.
import { Div, Text, Button, Input } from "react-native-magnus";
import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
import searchFoodInformation from "../utils/searchFoodInformation";
import { SafeAreaView, View, FlatList, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import BottomSheet from "react-native-gesture-bottom-sheet";
import FoodInformationModal from "./FoodInformationModal";
import { Dimensions } from 'react-native';
import mealsByDay from "../utils/mealsByDayAndUser";
const Search = ({navigation, route}) => {
const bottomSheet = useRef();
const [searchString, setSearchString] = useState("")
const [error, setError] = useState('');
const [results, setResults] = useState("")
const [clickedInfo, setClickedInfo] = useState({})
const [meals, setMeals] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
(async () => {
try {
const mealsByDayRes = await mealsByDay("10-01-2022");
if (mealsByDayRes != null) {
setMeals(mealsByDayRes);
}
} catch (error) {
console.log(error);
}
setLoading(false);
})();
}, [])
const SearchForFoodInformation = () => {
setError("")
setResults("")
searchFoodInformation(searchString).then((res) => {
try {
if (res.searchFoodInformation.error != "") {
setError(res.searchFoodInformation.error)
setResults("")
} else {
setError("")
setResults(res.searchFoodInformation.foodInformation)
}
} catch (error) {
alert(error)
}
}).catch(error => {setError(error)})
}
try {
if (route.params.params) {
setSearchString(route.params.params.data)
route.params.params = null
SearchForFoodInformation()
}
} catch (e) {
}
const Item = ({ element }) => (
<TouchableOpacity
onPress={() => {
setClickedInfo(element)
bottomSheet.current.show()
}}
>
<View style={styles.item}>
<Text>{element.name}</Text>
</View>
</TouchableOpacity>
);
const renderItem = ({ item }) => (
<Item element={item} />
);
return (
<>
{}
{!loading ? (
meals != null ? (
<Div shadow="sm" rounded="md" alignItems="center" mt={50} >
{error.length > 0 ? <Text color="black" p="md" borderStyle="solid" borderColor="red" borderWidth={3} rounded={16} m={10} bg="red"> {error} </Text> : null }
<Div alignItems="center" row>
<Input icon="ios-search" placeholder="Search" onChangeText={(text) => setSearchString(text)} value={searchString} mr="10%" ml="1%" />
<Button onPress={() => {SearchForFoodInformation()}} alignSelf="center" rounded="md" mr={"1%"} ml="auto">Suchen</Button>
</Div>
{ results.length > 0 &&
<Div pt={50}>
<FlatList
data={results}
renderItem={renderItem}
/>
</Div>
}
<BottomSheet hasDraggableIcon ref={bottomSheet} height={Dimensions.get("screen").height * 0.9}>
<FoodInformationModal id={clickedInfo.id} name={clickedInfo.name} nutrients={clickedInfo.nutrients} description={clickedInfo.description} meals={meals}/>
</BottomSheet>
</Div>
) : (
<Text>Loading...</Text>
)) : (
<Text>Loading...</Text>
)
}
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#eee',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
}
})
export default Search
But the call for mealsByDay isn't executed and so the value is always undefined, but the site renders like the values is not null.
Thanks