Button getting pressed when is created directly under an already long pressed button

I have a button (a TouchableHighlight) labeled BOOM and another button labeled thinking. Initially, the boom button is shown and on long press it should be replaced by the thinking button. And when the thinking button is pressed, it should be replaced again by the boom button. I have the following code:

{
this.state.thinking ?
    <TouchableHighlight onPress={this.thinkingOff} activeOpacity={0.9} underlayColor="#734F96" style={{borderRadius: 100}}>
        <View style={{...styles.sendButton, backgroundColor: '#e2b705'}}>
            <Text style={{fontSize: 9, color: 'white'}}>thinking</Text>
        </View>
    </TouchableHighlight>
:
    <TouchableHighlight onPress={this.send} onLongPress={this.thinkingOn} delayLongPress={300} activeOpacity={0.9} underlayColor="#e2b705" style={{borderRadius: 100}}>
        <View style={styles.sendButton}>
            <Text style={styles.buttonText}>BOOM</Text>
        </View>
    </TouchableHighlight>
}

and the methods thinkingOn and thinkingOff simply toggle the state thinking.

The problem is that when the thinking button is shown and I take off my finger (after holding the boom button), the onPress belonging to thinking is fired

You can try onPressOut or onPressIn.