React Native – Adding a new object to a state array of objects from a separate function

I’m working on trying to implement a menu ordering system on a project app. I have a foods.js file with an array of objects like so:

export const FOODS = [
    {
        id: 0,
        name: "Bagel w/ Cream Cheese",
        price: "$3.50",
        image: require("./images/coffee-stock-photo-01.jpg"),
        description: "Lorem ipsum dolor sit amet. In a nisl eu justo bibendum tempus. Donec.",
        favorite: false
    },
    {...more objects}

I have an OrderComponent.js file that looks like this:

{...other imports...}
import { FOODS } from '../shared/foods';

function RenderFood(props) {

    const {foods} = props;
    const foodList = foods.map(food => {
        return (
            <View key={food.id} style={{flexDirection: 'row', padding: 10}}>
                <Image
                    style={styles.itemImage}
                    resizeMode="cover"
                    source={food.image}
                />
                <Text style={styles.name}>
                    {food.name}
                    <Text style={styles.price}>
                        {'n' + food.price}
                    </Text>
                </Text>
                <TouchableOpacity
                    onPress={() => {
                        props.onShowModal() 
                        props.onAddButton(food)
                    }}  
                    style={{width: 60, height: 40, backgroundColor: 'white', alignSelf: center'}}>
                    <Text style={styles.addButton}>Add</Text>
                </TouchableOpacity>
            </View>
        )
    })
    return (
        <View style={{backgroundColor: '#ececec', borderWidth: 2, borderColor: '#e0e1e2', borderRadius: 5, margin: 10}}>{foodList}</View>
    )
}

class Order extends Component {
    constructor(props){
        super(props);
        this.state = {
            showModal: false,
            drinks: DRINKS,
            foods: FOODS,
            drinkList: [],
            foodList: [],
            orderArray: [{textTest:'my obj', otherTextTest:'second part of obj'}],
        };   
    }
    
    addToOrder(props){
        this.setState({orderArray: this.state.orderArray.concat(props)});
    };

    toggleModal() {
        this.setState({showModal: !this.state.showModal})
    }

    static navigationOptions = {
        title: 'Order'
    }
    
    render() {
        return (
            <ScrollView style={{backgroundColor: '#ececec'}}>
                <RenderHeader title={"Order"} />
                <View style={styles.container}>
                    <Card style={styles.orderCard}>
                        <TouchableOpacity
                            style={styles.button}
                            onPress={() => this.toggleModal()}
                        >
                            <Text>Start order</Text>
                        </TouchableOpacity>
                    </Card>
                    <Modal
                        animationType={'slide'}
                        transparent={false}
                        visible={this.state.showModal}
                        onRequestClose={() => this.toggleModal()} 
                    >
                        
                            <ScrollView>
                                <Text style={{textAlign: 'center', fontSize: 24, fontWeight: 'bold'}}>Food</Text>
                                <RenderFood 
                                    foods={this.state.foods} 
                                    onShowModal={() => this.toggleModal()}
                                    orderArray={this.state.orderArray} 
                                    onAddButton={() => this.addToOrder()}
                                />
                            </ScrollView>
                    </Modal>
                </View>
            </ScrollView>
        );
    }
}

I want to be able to pass in the food object that I am clicking the Add button on and add it to my state object for the Order. However, the first time I tap on the Add button nothing happens. Tapping a second time adds undefined to my object. If I do console.log(food) within my RenderFood function, it displays the entire object. But as soon as I pass it through props.onAddButton(food) it is undefined.

I have searched and searched but cannot figure out why this object will not pass its data through.