How to trigger onPress in button tag embedded in TouchableOpacity tag without triggering onPress in TouchableOpacity

I have a view that stays hidden until the expand state is true. it is set to !expand in toggleView when TouchableOpacity is pressed. However, when i click on the buttons to add to cart & delete the view is also toggled.How can i prevent that from happening?

return (<View style={styles.accordion}>        {/* Visible Bar which is pressed to expand hidden view */}<TouchableOpacity onPress={toggleView} style={styles.collapsibleBar}><Icon name={expanded ? 'chevron-down-outline' : 'chevron-right-outline'} pack='eva' fill='grey' style={styles.icon} /><View style={styles.itemHeader}><View style={styles.itemHeaderTextView}>                {/* HEADER STUFF */}</View><View style={styles.buttonView}><Button onPress={() => addToCart()}>                Add to Cart</Button><Button onPress={() => delete()}>                delete</Button></View></View></TouchableOpacity>        {/* Hidden View */}<View style={{ maxHeight: height, width: '100%', alignSelf: 'center' }}><>            {console.log(expanded)}            {expanded && ExpandedChild({                setHeight: setHeight,                date: props.cargoCharge.storageDueDate, tableData: props.cargoCharge.charges            })}</></View></View>);