Animated Header with ScrollView is not working - reactjs

Question

this is my profile page I want scroll animation but I didn't get output
** there is two-part one is header and body part is fully based on card view **
import React, { useRef } from 'react';
import {
StyleSheet,
Text,
View,
Image,
Animated,ScrollView
} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import {Card, Title, Paragraph } from 'react-native-paper';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';
import AnimatedHeader from 'C:\Users\keerthana\Desktop\mobile-client-1\src\components\AnimatedHeader.js';
const SettingsScreen=()=>{
const offset = useRef(new Animated.Value(0)).current;
return ( <SafeAreaProvider>
<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always' }}>
<AnimatedHeader animatedValue={offset} />
<ScrollView
style={{ flex: 1, backgroundColor: 'white' }}
contentContainerStyle={{
alignItems: 'center',
paddingTop: 220,
paddingHorizontal: 20
}}
showsVerticalScrollIndicator={false}
scrollEventThrottle={16}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: offset } } }],
{ useNativeDriver: false }
)}
>
<View style={styles.header}>
<View style={styles.headerContent}>
<Image style={styles.avatar} source={{uri: 'https://bootdey.com/img/Content/avatar/avatar2.png'}}/>
<Text style={styles.name}>
Name
</Text>
</View>
<View style={{ backgroundColor: "#FFF"}}>
<Card style={{padding:5,borderWidth: 1,borderRadius: 1,borderColor: '#adacac',marginTop:20}}>
<Card.Title title="INFO" subtitle="username" />
<Card.Content>
<Title style={{fontSize:16}}>Phone Number</Title>
<Paragraph>0000000000000</Paragraph>
</Card.Content>
<Card.Content style={{borderWidth: 0, borderColor: 'transparent', elevation: 0}}>
<Title style={{fontSize:16}}>Slogan</Title>
<Paragraph >Testing leads to failure, and failure leads to understanding</Paragraph>
</Card.Content>
</Card>
<Card style={{padding:5,borderWidth: 1,borderRadius: 1,borderColor: '#adacac',marginTop:10}}>
<Card.Title title="Groups" />
</Card>
<View style={{padding:5,borderWidth: 1,borderRadius: 1,borderColor: '#adacac',marginTop:10}}>
//group
<TouchableOpacity>
<View style={{flex: 1,justifyContent: 'center',marginLeft:20}}>
<Image
width={450}
containerStyle={{flex: 0.37}}
imageProps={{resizeMode:'cover'}}
source={{uri: 'https://bootdey.com/img/Content/avatar/avatar2.png'}}
activeOpacity={0.7}
/>
</View>
<View style={{flex: 11,flexDirection: 'column',justifyContent: 'center'}}>
<View style={{ flexDirection: 'row',justifyContent: 'flex-start', marginLeft: 9 }}>
<Text >music game</Text>
</View></View>
</TouchableOpacity>
<TouchableOpacity>
<Text>ludo game</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text> game</Text>
</TouchableOpacity>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
</SafeAreaProvider>
);
};
export default SettingsScreen;
const styles=StyleSheet.create({
header:{
backgroundColor: "#e6e3e3",
},
headerContent:{
padding:30,
alignItems: 'center',
},
avatar: {
width: 130,
height: 130,
borderRadius: 63,
borderWidth: 4,
borderColor: "white",
marginBottom:10,
},
name:{
fontSize:22,
color:"#FFFFFF",
fontWeight:'600',
},
profileDetail:{
alignSelf: 'center',
marginTop:200,
alignItems: 'center',
flexDirection: 'row',
position:'absolute',
backgroundColor: "#ffffff"
},
detailContent:{
margin:10,
alignItems: 'center'
},
title:{
fontSize:20,
color: "#00CED1"
},
count:{
fontSize:18,
},
bodyContent: {
flex: 1,
alignItems: 'center',
padding:30,
marginTop:40
},
textInfo:{
fontSize:18,
marginTop:20,
color: "#696969",
},
buttonContainer: {
marginTop:10,
height:45,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom:20,
width:250,
borderRadius:30,
backgroundColor: "#00CED1",
},
description:{
fontSize:20,
color: "#00CED1",
marginTop:10,
textAlign: 'center'
},
});
animation page
** this animation is used for profile page scroll **
import React from 'react';
import {
Animated,
TouchableOpacity,
View,
Text,
StyleSheet
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const HEADER_HEIGHT = 200;
const AnimatedHeader = ({ animatedValue }) => {
const insets = useSafeAreaInsets();
const headerHeight = animatedValue.interpolate({
inputRange: [0, HEADER_HEIGHT + insets.top],
outputRange: [HEADER_HEIGHT + insets.top, insets.top + 44],
extrapolate: 'clamp'
});
return (
<Animated.View
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: 10,
height: headerHeight,
backgroundColor: 'lightblue'
}}
/>
);
};
export default AnimatedHeader;
without using the animation part its works properly but after adding animation I don't know why it's not working.