React Native onScrollBeginDrag not very responsive to the scroll

[absenceofnunchi]

I want the opacity to go to 0 as I start to scroll down and the opposite as I scroll up. My code currently achieves a similar effect, but not as responsive. First, it goes to opacity: 1 abruptly, not gradually, and 2) the change happens late no matter how much I change the inputRange.

    const [inputAnimation] = useState(new Animated.Value(0))
    const inputInterpolate = inputAnimation.interpolate({
        inputRange: [0, 10],
        outputRange: [1, 0]
    })

    const animatedInputStyles = {
        opacity: inputInterpolate
    }

return (
        <View
            style={[styles.upperContainer]}
        >
            <View style={styles.textInputContainer}>
                <Animated.View style={animatedInputStyles}>
                    <TextInput
                        style={styles.textInput}
                        onChangeText={text => onChangeText(text)}
                        value={value}
                    />
                </Animated.View>
            </View>
        </View>
        <HeaderImageScrollView
            contentContainerStyle={styles.container}
            maxHeight={400}
            minHeight={0}
            onScrollBeginDrag={Animated.event([
                {
                    nativeEvent: {
                        contentOffset: {
                            y: inputAnimation
                        }
                    }
                }
            ])}
        >
        </HeaderImageScrollView>
)

How do I make the opacity animation more responsive?