React Native BottomSheet Many Modals in Context Provider

I’ve created a Context for “Sheets” and I’m trying to map through an array of Modal components to display them when a function is run inside of a component. For the sake of shortening the code snippet here, I’ve removed my imported Modals and replaced it with a simple text component.

Error: right operand of ‘in’ is not an object

SheetContextProvider

import { createContext, useContext, useRef } from 'react';
import { Text } from 'react-native';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';

export const SheetContext = createContext({});
export const useSheetContext = () => useContext(SheetContext);

import Sheet from '../components/Sheet';

const sheets = [WalletSheet, ShippingSheet];

export default function SheetContextProvider({ children }) {
    const refs = useRef([]);

    function handleShowModal(index) {
        refs.current[index].present();
    }

    const value = { handleShowModal };

    return (
        <BottomSheetModalProvider>
            <SheetContext.Provider value={value}>
                {children}
                {sheets.map((item, index) => {
                    return (
                        <Sheet ref={(element) => (refs.current[index] = element)} key={index}>
                            <Text>Test</Text>
                        </Sheet>
                    );
                })}
            </SheetContext.Provider>
        </BottomSheetModalProvider>
    );
}

Sheet Component (Wrapping the BottomSheet component)

import { forwardRef } from 'react';
import { StyleSheet } from 'react-native';
import { BottomSheetModal } from '@gorhom/bottom-sheet';

const Sheet = forwardRef(function Sheet({ children }, ref) {
    const modalSnapPoints = '45%';

    return (
        <BottomSheetModal
            ref={ref}
            index={0}
            snapPoints={modalSnapPoints}
        >
            {children}
        </BottomSheetModal>
    );
});

export default Sheet;

Component where I’m calling the handleShowModal function

// Sheet index is referenced from sheets array in SheetContextProvider
const SHEET_INDEX = 1;
const LISTINGS_TEXT = 'Listings';

export default function Actions() {
    const { handleShowModal } = useSheetContext();

    return (
        <Pressable onPress={() => handleShowModal(SHEET_INDEX)} style={styles.action}>
            <MaterialIcons name="storefront" size={22} color="white" style={styles.icon} />
            <Text style={styles.text}>{LISTINGS_TEXT}</Text>
        </Pressable>
    );
}