How to update Flatlist Choice

Question

Absolute react-native noob here. I am struggling with updating the 'selected item'. I'm using this as a piece of dummy data:

this.state = {
  branch: '',
  completedBy: '',
  reportedTo: '',
  branchData: {
    text: 'Branch',
    value: '',
    options: [
      {code: '0001', name: 'TEST 1', key: 1},
      {code: '0002', name: 'TEST 2', key: 2},
      {code: '0003', name: 'TEST 3', key: 3},
    ]
  }
};

I then made a separate file for my dropdown component, it looks like this:

super(props);
    this.state = {
        modalVisible: false
    };
  }
  
  render() {
    return (
        <>
        <TouchableWithoutFeedback style={styles.refreshBtn} onPress={() => this.setState({ modalVisible: true })} >
            <View style={styles.container} >
                {
                    this.props.data.value ? 
                        <Text style={styles.selectedText} >{this.props.data.value}</Text>
                        :
                        <Text style={styles.placeholderText} >{this.props.data.text}</Text>
                }
                <MaterialCommunityIcons name={'chevron-down'} size={30} color={Colors.grey} />
            </View>
        </TouchableWithoutFeedback>

        <Modal 
          animationType="slide"
          visible={this.state.modalVisible}
          onRequestClose={() => {
            this.setState({ modalVisible: false })
           }}
        >
            <TouchableOpacity onPress={() => this.setState({ modalVisible: false })} style={{ flexDirection: "row", justifyContent: "flex-end", margin: 10, paddingLeft: 50}}>
                <Ionicons name="md-close" size={30} />
            </TouchableOpacity>
            <FlatList 
            data={this.props.data.options}
            keyExtractor={(item) => item.key.toString()}
            renderItem={({ item }) => (
                <TouchableOpacity style={styles.itemContainer} onPress={() => console.log('tapped'} >
                    <Text style={styles.itemText}>{item.code + ' ' + item.name}</Text>
                </TouchableOpacity>
            )}
            />
        </Modal>
        </>
    );
  }
}

And then back to my initial file, I am simply calling the component like this:

<DropDownMenu data={this.state.branchData}/>

How do I update the value in the branch data object in order to display the selected branch on the dropdown in order to indicate to the user that their choice has been selected instead of displaying the placeholder text which displays as long as value is = to an empty string.