When I press back on my modal class, and click on a new item in my Flat List, the data remains the same from the first item I have pressed

Parent component:Constructor:

constructor(props) {    super(props);    this.state = {      isLoading: true,      dataSource: null,      show: false,      varFoodId: null,    };  }

This is the function where I fetch the data with an API request

fetchData = (item) => {    fetch(      `https://api.edamam.com/api/food-database/parser?ingr=${item}&app_id=${APP_ID}&app_key=${APP_KEY}`    )      .then((response) => response.json())      .then((responseJson) => {        this.setState({          itemArray: responseJson.hints,        });      })      .catch((error) => {        console.log(error);      });    Keyboard.dismiss();  };

The button I press to fetch the data and return a Flat List with info regarding the individual items. Which are all touchable.

<Button              title="Search"              onPress={() => this.fetchData(this.state.item)}            /><View style={styles.paddingForResultsContainer}><FlatList                style={styles.resultsBackground}                data={this.state.itemArray}                renderItem={({ item, index }) => (<TouchableOpacity                    onPress={() =>                      this.setState({                        show: true,                      })                    }>

The modal component at the bottom of the parent component

<NewModal                  showUs={this.state.show}                  toggleShow={() => this.setState({ show: false })}                  foodInfo={item}></NewModal></TouchableOpacity>            )}

My child component for the modal:

const NewModal = (props) => {  return (<Modal  visible={props.showUs}/*visible={props.show} */><View style={styles.modalView}><View><Text>{props.foodInfo.food.nutrients.CHOCDF}</Text><Button title="props" onPress={() => console.log({props})} /><Button title="Back" onPress={() => props.toggleShow()}></Button></View></View></Modal>  );};