@gorrhom React Native Bottom Sheet - Calling from another component

Im trying to implement this relatively popular bottom sheet in React Native by @gorhom.

My aim is to open the bottom sheet from another component. I've tried to follow this answer - here . However, i do not understand what goes in the touchable opacity onPress in my component where it is being called from.

Code below

BottomSheetModalComponent

export default function BottomSheetModalComponent({ref}) {// refconst bottomSheetModalRef = useRef<BottomSheetModal>(null);// variablesconst snapPoints = useMemo(() => ['25%', '50%'], []);// callbacksconst handlePresentModalPress = useCallback(() => {  ref.current?.present();}, []);const handleSheetChanges = useCallback((index: number) => {  console.log('handleSheetChanges', index);}, []);// rendersreturn (<BottomSheetModalProvider><View><BottomSheetModal        ref={ref}        snapPoints={snapPoints}        onChange={handleSheetChanges}><View><Text>Awesome 🎉</Text></View></BottomSheetModal></View></BottomSheetModalProvider>);};

Location Component

export default function LocationBar() {   // Create Ref  const userBottomSheetRef = useRef<BottomSheetModal>(null);  // Pass ref into the bottom sheet component<LocationBottomSheet ref={userBottomSheetRef} snapPoints={["30%"]}/>  return (<><View style={{ flexDirection: "row" }}><View style={styles.locationBar}><Octicons style={styles.locationIcon} name="location" size={18} /><TouchableOpacity onPress={() => {            //WHAT GOES HERE?          }}><Text style={{fontSize: 17, fontWeight: '600'}}>{userLocation}</Text></TouchableOpacity><Ionicons style={styles.chevronIcon} name="chevron-down" size={12} /></View></View></>  );}

Thanks in advance