How can i implement as a demo a list with react-native-gesture-flip-card

I was doing this, i tried to implemented a list with react-native-gesture-flip-card, but each row should rotate 180 grades,

import React from 'react';
import {View, Text, SafeAreaView, TouchableOpacity} from 'react-native';
import GestureFlipView from 'react-native-gesture-flip-card';

const Cards = (props) => {

    const flipViewRef = React.useRef();


    const renderFront = () => {
        return(
            <TouchableOpacity onPress = {() => {
                flipViewRef.current.flipRight() 
                setFlip('right');
                console.log("Pressed" + `${props.val}`)
        
        }} >
            <View style = {{backgroundColor:'red', width: 100, height: 100, alignItems: 'center', justifyContent: 'center'}}>
                <Text style = {{color: "white", fontSize: 20}}>Swipe Me</Text>
                

            </View>
            </TouchableOpacity>
        );
    };

    const renderBack = () => {
        return(
        <View style = {{backgroundColor:'blue', width: 100, height: 100, alignItems: 'center', justifyContent: 'center'}}>
            <Text style = {{color: "white", fontSize: 30}}>{props.val}</Text>
            {/* <TouchableOpacity onPress = {() => {
                (flipType === 'left') ? this.flipView.flipRight() : this.flipView.flipLeft();
                setFlip((flipType === 'left') ? 'right' : 'left');
        
        }}  style = {{padding: 10, backgroundColor: 'purple', width: 100, height: 40, alignItems: 'center', justifyContent: 'center'}}>
                <Text style = {{color: 'white'}}>Reverse</Text>
            </TouchableOpacity> */}

        </View>
        );
    };
    //ref = {(ref) => this.flipView = ref}

    return(
        <SafeAreaView style = {{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <GestureFlipView ref={flipViewRef}  width={300} height = {500}>
                {renderFront()}
                {renderBack()}
            </GestureFlipView>
        </SafeAreaView>
    );
}

export default Cards;

import React from 'react';
import {SafeAreaView, View, FlatList, Dimensions, StyleSheet } from 'react-native';
import Cards from './Cards';

const QuestionScreen = () => {

    // const data = ['1','2','3','4','5','6','7','8','9'];

    const DATA = [
      {
        id: '1',
        title: '1',
      },
      {
        id: '2',
        title: '2',
      },
      {
        id: '3',
        title: '3',
      },
      {
        id: '4',
        title: '4',
      },
      {
        id: '5',
        title: '5',
      },
      {
        id: '6',
        title: '6',
      },
      {
        id: '7',
        title: '7',
      },
      {
        id: '8',
        title: '8',
      },
      {
        id: '9',
        title: '9',
      }
      
    ];

      const Shuffle = (arr1) => {
        var ctr = arr1.length, temp, index;
        while (ctr > 0) {
            index = Math.floor(Math.random() * ctr);
            ctr--;
            temp = arr1[ctr];
            arr1[ctr] = arr1[index];
            arr1[index] = temp;
        }
        return arr1;
      }

      const numColumns = 3;
      const size = Dimensions.get('window').width/numColumns;
      const styles = StyleSheet.create({
        itemContainer: {
          width: size,
          height: size,
        },
        item: {
          flex: 1,
          margin: 3,
          backgroundColor: 'lightblue',
        }
      });
    
    return(
      <>
        <FlatList
            data={DATA}
            renderItem={({ item }) => (
                <View style={styles.itemContainer}>
                    <Cards val = {item.value}/>
                </View>
            )}
            keyExtractor={item => item.id}
            numColumns={numColumns} />

          {/* {
            data.map((index, item) => {
              return(
              
              <View style={styles.itemContainer}>
                    <Cards val = {item}/>
              </View>
              );
            })
          } */}
      </>
    );
}

export default QuestionScreen;

i am getting this error:Uncaught TypeError: Cannot read properties of undefined (reading 'length')

this is the library for

react-native-gesture-flip-card:

https://www.npmjs.com/package/react-native-gesture-flip-card

now i am getting this error:

AnimatedInterpolation.js:250 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

these are my dependencies:

"dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "axios": "^0.22.0",
    "expo": "^43.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-flip-card": "^1.0.6",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-paper": "^4.4.1",
    "react-native-reanimated": "^1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-status-bar-height": "^2.6.0",
    "react-native-web": "~0.13.12",
    "react-redux": "^7.2.5",
    "redux-thunk": "^2.4.1"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.15.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-react": "^7.21.5",
    "prettier": "^2.2.1"
  },

so i am using like this:

function SettingsScreen2() {
  return (
    <Stack.Navigator
      initialRouteName="QuestionScreen"
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="QuestionScreen" component={QuestionScreen} />
      <Stack.Screen name="CreateGroup" component={CreateGroup} />
    </Stack.Navigator>
  )
}