How can I open BottomSheetModal (@gorhom/bottom-sheet) in different component, using React-Native (Expo)

I am using https://gorhom.github.io/react-native-bottom-sheet/.

I was wondering how can I open "BottomSheetModal" in a different file e.g Navbar Component.

This is what my code looks like at the moment to open the Bottom Sheet inside of the same component.

const BottomSheetModal: FC = () => {
  const bottomSheetModalRef = useRef<omSheet>(null);

  const snapPoints = useMemo(() => ["25%", "50%"], []);

  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);

  return (
    <>
       handlePresentModalPress()} />
      

Awesome ????


    
  );
};

So how can I use the opening code of the Bottom Sheet inside of my Navbar Component?

:

 // Open BottomSheet here
            <TouchableWithoutFeedback onPress={() => openBottomSheet()}>
              <View>
                <Image
                  style={styles.avatar}
                  source={{
                    uri: "https://lumiere-a.akamaihd.net/v1/images/character_themuppets_kermit_b77a431b.jpeg?region=0%2C0%2C450%2C450",
                  }}
                />
              </View>
            </TouchableWithoutFeedback>

Thank you!