@gorhom Bottom Modal isn't showing

Question

I'm wanna add Bottom Modal to my RN project but when I do following steps from documentation it shows nothing.

I have two files. The App component and the Bottom modal that I use in App component

CustomBottomShhetModal.tsx

import { useMemo, useRef } from 'react'
import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet'
import { StyleSheet, Text } from 'react-native'

const CustomBottomSheetModal = () => {
  const snapPoints = useMemo(() => ['25%', '50%'], [])
  const bottomSheetModalRef = useRef<BottomSheetModal>(null)

  return (
    <BottomSheetModal ref={bottomSheetModalRef} index={0} snapPoints={snapPoints}>
      <BottomSheetView style={styles.contentContainer}>
        <Text>LOL</Text>
      </BottomSheetView>
    </BottomSheetModal>
  )
}

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
  },
})

export default CustomBottomSheetModal

App.tsx

import { SafeAreaView, StatusBar, StyleSheet } from 'react-native'
import { Provider } from 'react-redux'
import { persistor, store } from 'store'
import { PersistGate } from 'redux-persist/integration/react'
import CustomThemeProvider, { ThemeContext } from './src/theme'
import MainNavigation from './src/navigation/MainNavigation'
import { useContext, useMemo } from 'react'
import { ThemeProps } from 'theme/ThemeData'
import { WalletContextProvider } from 'providers/wallet/context'
import * as Sentry from '@sentry/react-native'
import CustomBottomSheetModal from 'components/Modal/CustomBottomSheetModal'
import  { BottomSheetModalProvider } from '@gorhom/bottom-sheet'

if (!__DEV__) {
  //   //TODO: Change later
  Sentry.init({
    dsn: 'my_secret',
    tracesSampleRate: 1.0,
  })
}

const CustomAppView = () => {
  const { theme } = useContext(ThemeContext)
  const styles = useMemo(() => getStyles(theme), [theme])

  return (
    <BottomSheetModalProvider>
      <SafeAreaView style={styles.screen}>
        <StatusBar backgroundColor={styles.screen.backgroundColor} />
        <MainNavigation />
        <CustomBottomSheetModal />
      </SafeAreaView>
    </BottomSheetModalProvider>
  )
}

const App = () => {
  return (
    <Provider store={store}>
      <WalletContextProvider>
        <CustomThemeProvider>
          <PersistGate loading={null} persistor={persistor}>
            <CustomAppView />
          </PersistGate>
        </CustomThemeProvider>
      </WalletContextProvider>
    </Provider>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
})

const getStyles = (theme: ThemeProps) =>
  StyleSheet.create({
    screen: {
      flex: 1,
      backgroundColor: theme.colors.primary,
    },
  })

export default __DEV__ ? App : Sentry.wrap(App)
// export default Sentry.wrap(App) //USE IN PRODUCTION

When I copy and paste entire example instead of my code everything works. But I need to find out the solution for my case