OnOverLap not working using React-native Draggable Flatlist

Question

I am tryin to test out the react-native dragable-flatlist library before i add it to my project. But for some reason, the overlap feature or detection does not seem to work. Nothing is printed in the console when i do overlap a goal. '

import React, { useState, useCallback } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import DraggableFlatList from "react-native-draggable-flatlist";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from "react-native-reanimated";
import {
  RectButton,
  GestureHandlerRootView,
} from "react-native-gesture-handler";

const GoalScreen = () => {
  const [data, setData] = useState([
    { id: "1", text: "Goal 1" },
    { id: "2", text: "Goal 2" },
    { id: "3", text: "Goal 3" },
    { id: "4", text: "Goal 4" },
    { id: "5", text: "Goal 5" },
    // ... other goals
  ]);

  const translateX = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
    };
  });

  const renderItem = ({ item, drag, isActive }) => {
    return (
      <Animated.View style={[styles.goalItem, animatedStyle]}>
        <RectButton style={styles.touchable} onLongPress={drag}>
          <Text style={styles.goalText}>{item.text}</Text>
        </RectButton>
        {isActive && <Text style={styles.draggingText}>Dragging...</Text>}
      </Animated.View>
    );
  };

  const handleDragEnd = ({ data }) => {
    // Update the state with the new order after drag-and-drop
    setData(data);
  };

  const handleOverlap = useCallback((draggedIndex, targetIndex) => {
    // Custom logic to handle overlap and create subtask
    // For example, dispatch an action to update the state
    console.log("Item dragged over another item");
    // Implement your subtask creation logic here
  }, []);

  function testOverlap() {
    console.log("This goal overlapped");
  }

  return (
    <GestureHandlerRootView>
      <DraggableFlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        onDragEnd={handleDragEnd}
        // activationDistance={20}
        overlap={0.5}
        onOverlap={testOverlap}
        dragActivationThreshold={10}
      />
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  goalItem: {
    backgroundColor: "#F5F5F5",
    borderRadius: 8,
    marginVertical: 8,
    padding: 20,
    alignItems: "center",
  },
  goalText: {
    fontSize: 18,
    fontWeight: "bold",
  },
  draggingText: {
    fontSize: 16,
    marginTop: 10,
    color: "gray",
  },
  touchable: {
    width: "100%", // Make the touchable take the full width
  },
});

export default GoalScreen;

What am i missing, or what is potentially causing the overlap feature not to work