hellow guys ,
I using @gohan/bottom-sheet and context Api to implement Custom bottomSheet . which can be used on all over the application using useModel hook to display bottomSheet for different components .

but bottomSheet is not showing(but without using context if I am normally using bottomsheet it is working)

I THINK I have implemented the context api wrong way or is it a problem of react rerendering . Which rmounte the components.

please help me ???????? ???????? ????????

Thank you.

`

import { View, Text } from 'react-native'

import React,{ useState, createContext, useContext,useRef , useMemo} from 'react'

import BottomSheetModal,{ BottomSheetModalProvider } from '@gorhom/bottom-sheet';

import Model from "./Model.tsx"



const BottomModelContext = createContext(null);



export const BottomModelProvider = ({ children})=>{

    const [model, setModel] = useState(null);

    const SetModel = ({id, type})=>{

      setModel({ id, type });

      refBottomSheet?.current?.snapToIndex(0);

      console.log("showModel");

    }

    

    const refBottomSheet = useRef(null);

    

  const snapPoints = useMemo(() => ['25%', '50%', '75%', '100%'], []);

  

  return(

   <BottomModelContext.Provider value={SetModel}>

      <BottomSheetModalProvider>

       <BottomSheetModal

        ref={refBottomSheet}

        index={1}

        snapPoints={snapPoints}

        enablePanDownToClose={true}

      >

        <Model model={model} />

     </BottomSheetModal>

        {children}

      </BottomSheetModalProvider>

    </BottomModelContext.Provider>

  )

}



export const useModel = ()=> useContext(BottomModelContext);

`

I first tried to wrap gohan/bottom-sheet on the root _layout and use the BottomSheetModel on a tab page it was working correctly .

But when I am using it with context api and wrapping the Provider on the root _layout to implement it it’s not working