How to access bottomSheet ref from another component using forwardRef?

Question

I have a bottom sheet that appears in different screens based on pressing buttons that's why I need to store the bottom sheet in a separate component so I can call it on different screens. for more illustration say I have a home screen with an add button on clicking that button, I need to view the bottom sheet. After searching I found a way to do so by forwardRef as explained in the next code but the problem is with onPress={() => sheetRef.current.snapTo(0)} the bottomsheet doesn't appear. Please feel free to suggest a better way to handle this situation or tell me what's wrong with it, Thanks!

import { BottomSheets } from "../components/BottomSheets";
export default function HomeScreen() {
 const sheetRef = React.createRef<any>();
.
.
return(
 <View>
.
.
   <BottomSheets ref={sheetRef} />
   <TouchableOpacity style={{ marginTop: 4 }} onPress={() => 
       sheetRef.current.snapTo(0)}>
      <Text>Add</Text>
    </TouchableOpacity>
.
.
 </View>
}

and the bottomSheet component

export const BottomSheets = React.forwardRef((props, ref: any) => {
const createRef = React.createRef<any>();
const renderContent = () => ()
const renderCreateContent = () => ()
.
.
return (
    <View>
      <BottomSheet
        ref={ref}
        snapPoints={[220, 0]}
        renderContent={renderContent}
        initialSnap={1}
        enabledGestureInteraction={true}
        borderRadius={20}
      />
      <BottomSheet
        ref={createRef}
        snapPoints={[650, 0]}
        renderContent={renderCreateContent}
        renderHeader={renderHeader}
        initialSnap={1}
        enabledGestureInteraction={true}
        enabledContentTapInteraction={false}
        enabledBottomInitialAnimation={true}
      />
    </View>
  );
});