Getting TypeError: Cannot add new property '__reanimatedHostObjectRef' React Native Reanimated-2

Question

I am developing a project where I have a listiview and showing 150-200 customers. There is a feature where I need to drag and drop list item. Now I am trying to implement this with RecylerListView And React-Native-Reanimated-2, but facing some problems. Here is my main wrapper.

    const gestureHandler = useAnimatedGestureHandler({
      onStart(event) {
        runOnJS(setMoving)(true);
      },
      onActive(event) {
        top.value = event.absoluteY - 240;
        console.log(listRef);
      },
      onFinish() {
        runOnJS(setMoving)(false);
      }
    });
    
    const renderCustomerList = (type, data) => {
      return (
        <Animated.View style={[styles.customerView]}>
          <PanGestureHandler onGestureEvent={gestureHandler}>
            <Animated.View style={{ width: wp("17%") }}>
              <View style={styles.draggingHandler}>
                <Text>{data.unique_number}</Text>
              </View>
            </Animated.View>
          </PanGestureHandler>
          <Customer key={data.borrower_id} details={data} navigation={props.navigation} />
        </Animated.View>
      );
    }
    
    const MainBody =() => {
      const listRef = React.createRef();
      .....................................
    
      <SafeAreaView style={styles.wrapperView}>
          <RecyclerListView
            ref={listRef}
            style={{ flex: 1 }}
            onScroll={handleScroll}
            onLayout={handleLayout}
            rowRenderer={renderCustomerList}
            dataProvider={dataProvider}
            layoutProvider={layoutProvider}
            renderAheadOffset={RENDER_AHEAD}
          />
    
          {moving && (
            <Animated.View style={reanimatedStyle}>
              <View style={styles.customerView}>
                <View style={[ styles.draggingHandler, {width: wp("17%") }]}>
                  <Text>{selectedCustomer.unique_number}</Text>
                </View>
                <Customer key={selectedCustomer.borrower_id} details={selectedCustomer} navigation={props.navigation} />
              </View>
            </Animated.View>
          )}
        </SafeAreaView>
        ............................................
      }

In this list, while dragging an item and when it reaches the threshold/top, I am programmatically trying to scroll the listview. For that, I needed to get a reference to the RecyclerListView. But when I'm trying to use the listRef in onActive gesture event, the app crashed. When I open my logcat in android studio, it is giving me a bunch of errors. Among them TypeError: Cannot add new property '__reanimatedHostObjectRef'. What could be the reason? And what is your suggestion how should I implement this. Here is a snack link: https://snack.expo.dev/@rassemdev/customer-list . If you remove comment on line no 46, it will give an error. Here is my dependencies:

  "dependencies": {
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^6.0.0",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "moment": "^2.29.1",
    "native-base": "^3.2.1",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-native-app-auth": "^6.4.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-pager-view": "^5.4.9",
    "react-native-reanimated": "^2.2.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-sqlite-storage": "^5.0.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^8.1.0",
    "recyclerlistview": "^3.0.5",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5"
  },