How to get the Y position of list item in FlatList in ReactNative Expo Web

How can I get the Y position of list item preferably in relation to the parent in Expo app, I need to know when it becomes visible and how far did it move since it became visible if possible both on web and mobile. I have been trying to do it on scroll by reading both nativeEvent and ref.measure() but the number I get does not change when i scroll, and about the mobile I get these same as on web (same numbers for every list el) on IOS but indexes are going crazy high, and on Android device I get undefined like so

Object {
  "height": 0,
  "idx": 15,
  "pageY": 323,
  "y": 0,
}
Object {
  "height": undefined,
  "idx": 16,
  "pageY": undefined,
  "y": undefined,
}

On android and web it looks like so:

Object {
  "height": 15,
  "idx": 28,
  "pageY": 351.6666564941406,
  "y": 0,
}
Object {
  "height": 15,
  "idx": 29,
  "pageY": 351.6666564941406,
  "y": 0,
}
Object {
  "height": 15,
  "idx": 30,
  "pageY": 351.6666564941406,
  "y": 0,
}

Could you please tell me what am i doing wrong here? Parent Component:

    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.listWrapper}>
        <FlatList
          contentContainerStyle={[
            styles.list,
            { height: Platform.OS === "web" ? height * 0.9 : "auto" },
          ]}
          data={sortedData}
          keyExtractor={(item) => item.test}
          renderItem={({ item, index }) => (
            <TestCard
              onPress={() =>
                navigation.navigate("TestDetails", {
                  testName: item.test,
                })
              }
              itemDetails={{ ...item, index }}
              ref={(el) => el && listItemRef.current.push(el)}
            />
          )}
          onScroll={({ nativeEvent }) => {
            listItemRef.current.forEach((refElement, idx) => {
              refElement.measure((y, height, pageY) => {
                console.log({
                  y,
                  height,
                  pageY,
                  idx,
                });
              });
            });
            const { contentOffset, contentSize, layoutMeasurement } =
              nativeEvent;
            console.log({
              contentOffsetY: contentOffset.y,
              contentSizeHeight: contentSize.height,
              layoutMeasurementHeight: layoutMeasurement.height,
            });
          }}
        />
      </View>
    </View>

Child Component:

export const TestCard = forwardRef<View, Props>(
  ({ onPress, itemDetails: { test, freq } }, ref) => {
    return (
      <View
        style={styles.wrapper}
        ref={ref}
      >
        <Pressable onPress={onPress} style={styles.card}>
          <View style={styles.frequencyWrapper}>
            <Text style={styles.frequency}>Once per {freq / 12} yr</Text>
          </View>
          <View style={styles.titleWrapper}>
            <Text style={styles.title}>{test}</Text>
          </View>
        </Pressable>
        <FontAwesome5
          name="arrow-circle-right"
          size={40}
          color={COLORS.DARKBLUE}
          style={styles.sideMarker}
        />
      </View>
    );
  }
);