Не удается прокрутить FlatList в response-native-scroll-bottom-sheet

Question

Я использую в проекте response-native-scroll-bottom-sheet, делая все, как сказано в документации, но в конце концов я не могу прокручивать свой FlatList внутри BottomSheet. Думаю, это из-за реанимированной библиотеки lib. Но в документации написано, что я могу использовать версию v2+ ...

      "react-native": "0.64.1",    
"react-native-scroll-bottom-sheet": "^0.7.0",   
"react-native-reanimated": "^2.2.0",
"react-native-gesture-handler": "^1.8.0",

Мой компонент BottomSheet выглядит так:

      <ScrollBottomSheet<any>
                        componentType="FlatList"
                        topInset={24}
                        ref={sheetRef}
                        enableOverScroll={true}
                        snapPoints={[40, '50%']}
                        initialSnapIndex={1}
                        renderHandle={() => (
                            <View style={{
                                alignItems: 'center',
                                backgroundColor: 'white',
                                paddingVertical: 20,
                                borderTopLeftRadius: 20,
                                borderTopRightRadius: 20
                            }}>
                                <View style={{
                                    width: 40,
                                    height: 2,
                                    backgroundColor: 'rgba(0,0,0,0.3)',
                                    borderRadius: 4
                                }} />
                            </View>
                        )}
                        initialNumToRender={5}
                        data={restaurants}
                        keyExtractor={i => `${i.name}${Math.random()}`}
                        renderItem={({ item }: any) => (
                            <View style={{
                                paddingLeft: 20,
                            }}>
                                <ImageBackground source={require('../../assets/images/test-restaurant.png')} style={styles.restaurantImage} imageStyle={{borderRadius: 16}}>
                                    <Text style={styles.restaurantTimestamp}>Opens at 08.00</Text>
                                </ImageBackground>
                                <Text style={styles.restaurantTitle}>{item.name}</Text>
                                <Text style={styles.restaurantOptions}>{item.price === 'high' ? '$$$' : ''}{item.cuisines.map((c: any) => (`· ${c}`))}</Text>
                                <View style={styles.restaurantAdditionalContainer}>
                                    <Text style={styles.restaurantDiscount}>-15%</Text>
                                    <Text style={styles.restaurantCookingTime}>
                                        <Image source={require('../../assets/icons/RestaurantCookingTimeIcon.png')} style={styles.restaurantCookingTimeIcon}/>
                                        20-25 min
                                    </Text>
                                </View>
                            </View>
                        )}
                        contentContainerStyle={{backgroundColor: '#FFF'}}
                    />

Надеюсь, у кого-то была такая же проблема, так что вы можете мне помочь