OnScroll animation was not smooth on Android device - react-native

Question

I want to freeze the customer profile component when user scrolling the page, so I set the scrollY value to translateY property to avoid the component from moving up. However, on android device, when the user scroll slightly faster, the component will become a little bit shaky even I have already added useNativeDriver: true.
Really APPRECIATE if anyone could help, was struggling for quite a number of days.
Below is the code for the entire screen:
const scrollY = React.useRef(new Animated.Value(0)).current;
<Animated.ScrollView
scrollEventThrottle={16}
automaticallyAdjustContentInsets={false}
contentContainerStyle={{ flexGrow: 1 }}
contentInsetAdjustmentBehavior="automatic"
bounces={false}
showsVerticalScrollIndicator={false}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
{ useNativeDriver: true }
)}
>
<Animated.View
style={{
width: deviceWidth,
height: 250,
backgroundColor: 'lightgrey',
paddingHorizontal: 30,
justifyContent: 'center',
alignItems: 'center',
transform: [
{
translateY: scrollY
}
]
}}
>
<View
style={{
borderRadius: 100 / 2,
width: 100,
height: 100,
backgroundColor: 'white',
marginBottom: 20
}}
></View>
<Text style={{ marginBottom: 5, fontSize: 22 }}>Chris Groves</Text>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>$ 190.83</Text>
</Animated.View>
<View
style={{
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center'
}}
>
<View
style={{
height: 200,
width: 350,
backgroundColor: 'red',
marginVertical: 30
}}
/>
<View
style={{
height: 200,
width: 350,
backgroundColor: 'red',
marginBottom: 30
}}
/>
<View
style={{
height: 200,
width: 350,
backgroundColor: 'red',
marginBottom: 30
}}
/>
<View style={{ height: 200, width: 350, backgroundColor: 'red' }} />
</View>
</Animated.ScrollView>
Demo video for better understanding:
Demo Video