React native dialog is closing other components on button click - react-native

Question

//Here is my code
const MyApp=()=>{
const [visible, setVisible] = useState(false);
const refRBSheet = useRef();
const showDialog = () => {
setVisible(true);
};
const handleCancel = () => {
setVisible(false);
};
const renderItem = ({item})=>{
return(
<View style={{flex:1}}>
<TouchableOpacity onPress={() =>
openBottomSheet(refRBSheet)
}>
<Text style={styles.dialogSubTitle}>{item.title}</Text>
</TouchableOpacity>
//bottomsheet
<RBSheet ref={refRBSheet}
height={600}
closeOnDragDown={true}
>
<BottomSheet data={props} />
</RBSheet>
</View>
);
}
//method to close dialog and open bottomsheet
const openBottomSheet=(bottomSheet)=>{
bottomSheet.current.open();
handleCancel()
}
return (
<View style={styles.itemContainer}>
<TouchableOpacity onPress={showDialog}>
<Icon name="plus-circle" size={25} color="#C57F62" style={{marginRight:'7%'}} />
</TouchableOpacity>
<View style={styles.dialogContainer}>
<Dialog.Container
contentStyle={{
width:'50%',
margin: 0,
paddingBottom:'7%',
paddingTop:0,
borderRadius:10,
borderColor:"#ffffff",
backgroundColor:"#ffffff",
borderWidth:3,}}
visible={visible} onBackdropPress={handleCancel}>
<FlatList
data={dialogList}
renderItem={renderItem} />
</Dialog.Container>
</View>
);
}
I have a button in my react native application when user clicks that button it has to open a dialog.Inside a dialog i have kept list and whenever user selects item from list dialog has to close and the bottomsheet has to open.
Note:
The issue is when item is selected from dialog the bottomsheet is open and suddenly it closing both dialog and bottom sheet.
Expected output:
When item is selected from list the dialog should close and the bottomsheet has to be opened