TouchableOpacity onPress event doesn't work on Absolute parent, and Relative the parent's parent

This is my code :

<View style={{ position: 'relative' }}>                {                    open &&<View style={styles.selectorContainer}><TouchableOpacity style={styles.itemContainer} onPress={() => { console.log('hi') }}><Typography>{'aaa'}</Typography></TouchableOpacity></View>                }</View>

This is the styling :

const styles = StyleSheet.create({    container: {    },    selectorContainer: {        backgroundColor: color.white,        ...dropShadow,        position: 'absolute',    },    itemContainer: {        paddingVertical: 8,        paddingHorizontal: 16,        backgroundColor: color.white,        justifyContent: 'flex-start',    }})

I tried to make a Dropdown list and this is how far i've got.

i set the ItemsContainer parent to have a position: relative so that the itemsContainer position can be set to "absolute" and so the itemContainer is relative to it parent.

this is going the way i want,

but...

when i add <TouchableOpacity /> component inside ItemsContainer the onPress function did not get fired

please help