snapPoint not working, snaps to 1st element always.

[hrahul2605]

I'm trying to create a veritical scrollview kind of thing, which snaps at each element.
I already did achieve what using ScrollView, but this way it gives a better UX to it i think.

The problem i'm facing is,

1. The more i swipe, to go the next element, i have to swipe a little more than previous to go the next element.
2. When at element, if i try to swipe back to the previous element, it always snaps to the first element.

the value 24 i used, is just status bar height

Here's my code.
Thanks in advance.

import React from 'react';
import {Dimensions, StyleSheet, Text, View} from 'react-native';
import {
  PanGestureHandler,
  PanGestureHandlerGestureEvent,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import {snapPoint} from 'react-native-redash';

const data = [
  {
    id: '1',
    title: 'Product 1',
  },

  {
    id: '2',
    title: 'Product 2',
  },

  {
    id: '3',
    title: 'Product 3',
  },

  {
    id: '4',
    title: 'Product 4',
  },
];
const {height} = Dimensions.get('window');
const HEIGHT = height - 24;
const snapPoints = data.map((_, i) => i * -HEIGHT);

const Product: React.FC = (): React.ReactElement => {
  const translateY = useSharedValue(0);
  const onGestureEvent = useAnimatedGestureHandler<
    PanGestureHandlerGestureEvent,
    {y: number}
  >({
    onStart: (_, ctx) => {
      ctx.y = translateY.value;
    },
    onActive: (e, ctx) => {
      translateY.value = ctx.y + e.translationY;
    },
    onEnd: ({translationY, velocityY}) => {
      const snapPointY = snapPoint(translationY, velocityY, snapPoints);
      translateY.value = withSpring(snapPointY, {
        velocity: velocityY,
        overshootClamping: true,
        mass: 1.5,
        stiffness: 400,
        damping: 50,
      });
    },
  });

  const style = useAnimatedStyle(() => {
    return {
      transform: [{translateY: translateY.value}],
    };
  });
  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <Animated.View style={StyleSheet.absoluteFill}>
        <Animated.View style={[style, {height: HEIGHT * data.length}]}>
          {data.map((item) => (
            <View style={styles.container} key={item.id}>
              <Text style={styles.text}>{item.title}</Text>
            </View>
          ))}
        </Animated.View>
      </Animated.View>
    </PanGestureHandler>
  );
};

export default Product;

const styles = StyleSheet.create({
  container: {
    height: HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
    borderRadius: 100,
  },
  text: {
    color: 'white',
  },
});