Property 'current' does not exist on type '((instance: BottomSheetModalMethods | null) => void) | MutableRefObject<BottomSheetModalMethods | null>'

Question

I'm using React Native and created a separate component for my BottomSheetModal. I needed to pass the screen's ref to the component, so I used forwardRef. The issue is that in the parent component, I can use bottomSheetModalRefClose.current?.close(), but in the separate child component, I cannot.

I created the variable bottomSheetModalRefOpen in the parent component for a BottomSheetModal that has a close button (x). Here are the important parts of my parent component code:

const bottomSheetModalRefOpen = useRef<BottomSheetModal>(null);
const openBottomSheetModalOpen = () => bottomSheetModalRefOpen.current?.present()

return (
   <View style={[globalStyles.container, { gap: 8 }]}>
     <Button
        variant="contained"
        size="medium"
        suffixIcon="cancel_round"
        suffixIconColor="white"
        prefixIcon="cancel_round"
        prefixIconColor="white"
        onPress={openBottomSheetModalOpen}
      >
        <Label color='white'>Open BottomSheetModal Opened</Label>
      </Button>

      <ModalBottomSheet ref={bottomSheetModalRefOpen} disableableClosePressingBackDrop>
        <Label>ARE YOU DRIVING?</Label>
        <Button variant="contained">
            <Label fontWeight="Lexend Medium" color="white">Yes</Label>
        </Button>
        <Button variant="outlined">
            <Label fontWeight="Lexend Medium" color="primary">No</Label>
        </Button>
      </ModalBottomSheet>
   </View>
)

And my ModalBottomSheet component:

import {
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetModalProps,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import { globalStyles } from "../../../styles/global";
import React, { ReactNode, forwardRef, useCallback, useRef } from "react";
import IconStyled from "../IconStyled";
import Button from "../Button";
import { View } from "react-native";

interface ModalBottomSheetProps extends BottomSheetModalProps {
  children: React.ReactNode;
  disableableClosePressingBackDrop?: boolean;
}

export type Ref = BottomSheetModal;

const ModalBottomSheet = forwardRef<Ref, ModalBottomSheetProps>(
  (
    { style, children, disableableClosePressingBackDrop = false, ...props },
    ref
  ) => {
    console.log(disableableClosePressingBackDrop);
    const renderBackDrop = useCallback((props: any) => {
      return (
        <BottomSheetBackdrop
          appearsOnIndex={0}
          disappearsOnIndex={-1}
          pressBehavior={disableableClosePressingBackDrop ? "collapse" : "close"}
          {...props}
        />
      );
    }, []);

    return (
      <BottomSheetModal
        ref={ref}
        enableDynamicSizing
        style={{ shadowColor: "#000", elevation: 10 }}
        handleIndicatorStyle={disableableClosePressingBackDrop ? {height: 0} : globalStyles.bottomSheetIndicator}
        enablePanDownToClose={false}
        backgroundStyle={globalStyles.bottomSheetBackground}
        backdropComponent={renderBackDrop}
        {...props}
      >
        <BottomSheetView>
            {disableableClosePressingBackDrop 
            ? (<View style={{alignSelf: 'flex-end', marginRight: 16}}>
                <Button variant="text" onPress={() => ref!.current.close()} style={{borderBottomWidth: 0}}>
                    <IconStyled icon="close"></IconStyled>
                </Button>
            </View>)
            : null}
            <View style={[globalStyles.bottomSheetView, disableableClosePressingBackDrop ? {paddingTop: 5} : null]}>
                {children}
            </View>
          
        </BottomSheetView>
      </BottomSheetModal>
    );
  }
);

export default ModalBottomSheet;

It's showing an error under 'current' with the text: 'Property 'current' does not exist on type '((instance: BottomSheetModalMethods | null) => void) | MutableRefObject<BottomSheetModalMethods | null>'.'

Due to this, I can't close the BottomSheetModal by clicking the x button. How can I close the BottomSheetModal by clicking the x button?

error image:

bottomSheetModal image: