I am using React Native with Expo and i am attempting to use Gorhom's Bottom Sheet component to display a bottom sheet when a user clicks on a button.Everything works fine except the bottom sheet , when i click on the button it won't show up . i have also inserted a cosncole.log and it shows that the button haw been clicked and i also get no errors

this is the buttomSheet

import { View, Text, Dimensions } from "react-native";
import React, { forwardRef, useMemo } from "react";
import { BottomSheetModal } from "@gorhom/bottom-sheet";

const { height } = Dimensions.get("window"); // Get the screen height

export type Ref = BottomSheetModal;

const BottomSheet = forwardRef<Ref>((props, ref) => {
  // Set snap points to the full height of the screen
  const snapPoints = useMemo(() => [height], [height]);

  return (
    <BottomSheetModal ref={ref} snapPoints={snapPoints}>
      <View
        style={{
          flex: 1,
          backgroundColor: "white",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <Text>Full-Screen Bottom Sheet Content</Text>
      </View>
    </BottomSheetModal>
  );
});

export default BottomSheet;

and this is where i call it

import { Ionicons } from "@expo/vector-icons";
import { BottomSheetModal } from "@gorhom/bottom-sheet";
import BottomSheet from "./BottomSheet";
import { Link } from "expo-router";
import { useRef } from "react";
import { Text, View, StyleSheet, TouchableOpacity, Image } from "react-native";
import { TextInput } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function CustomeHeader() {
  const BottomSheetRef = useRef<BottomSheetModal>(null);

  const openModal = () => {
    console.log("Opening BottomSheet"); // Debug: Check if this runs
    BottomSheetRef.current?.present(); // Attempt to present the BottomSheet
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <BottomSheet ref={BottomSheetRef} />
      <View style={styles.container}>
        <TouchableOpacity onPress={openModal}>
          <Image
            source={require("@/assets/images/logo.png")}
            style={styles.logo}
          />
        </TouchableOpacity>

Obviously there is more code in the second part