I'm trying to move a dot along my svg chart following the user's thumb on the screen, however, I am getting an offset when doing so, which means it won't follow the user's thumb but instead will always be a little behind and that offset increases as we scroll left of right. I can' figure out where this offset come from.

Here is my code

const properties = path.svgPathProperties(data);
const cursor = useRef();
const [x, setX] = useState(new Animated.Value(0))

const moveCursor = (value) => {
        const xVal = properties.getPointAtLength(lineLength - value).x
        const yVal = properties.getPointAtLength(lineLength - value).y
        cursor?.current?.setNativeProps({
            top: yVal - cursorRadius,
            left: xVal - cursorRadius
        });

useEffect(() => {
     x.addListener(({ value }) => moveCursor(value));
     moveCursor(0);
}, [])

return(
    
    <Path
        d={data}
        fill='transparent'
        stroke={color}
        strokeWidth={2}></Path>
    <View ref={cursor} style={styles.cursor} />
    <Animated.ScrollView
                        style={StyleSheet.absoluteFill}
                        contentContainerStyle={{ width: lineLength * 2 }}
                        showsHorizontalScrollIndicator={false}
                        scrollEventThrottle={16}
                        bounces={false}
                        onScroll={Animated.event(
                            [
                              {
                                nativeEvent: {
                                  contentOffset: { x },
                                },
                              },
                            ],
                            { useNativeDriver: true },
                      )}
                      horizontal
                    />
)