Animating Header Using Transform React Native

Question

Using React Native, I am trying to mimic the below animation. The header (Map Pin and Stamba Hotel Tbilisi) scrolls up with the FlatList, but then if the user scrolls down the header is immediately scrolled down with the FlatList. Kindly note this animation is adhering to the SareAreaView.

The problems I am having are the following;

1. When the user scrolls up the FlatList doesn't go with it, therefore, leaving a blank white area.
2. When the user scrolls back down the Header is not immediately scrolling down.
3. The header does not go under the SafeAreaView

COMPONENT TREE

return (
  <SafeAreaView style={{ zIndex: 1, flex: 1 }}>
    <Animated.View style={[styles.header, { transform: [{ translateY }] }]}>
      <HomeHeader2 />
    </Animated.View>
    {loading ? 
      <View/> : <FlatList/>
    }
  </SafeAreaView>
)

HANDLING ANIMATION

// FLATLIST PROP TO HANDLE ANIMATION
onScroll={ Animated.event([{nativeEvent:
  { contentOffset: { y: scrollY } } }], {
      useNativeDriver: false,
  })
}
// INTERPOLATE OVER SCROLLY
  const scrollY = useRef(new Animated.Value(0)).current;
  const translateY = scrollY.interpolate({
    inputRange: [0, 50],
    outputRange: [0, -50],
    extrapolateRight: "clamp",
  });

STYLING

const styles = StyleSheet.create({
  header: {
    backgroundColor: "blue",
    justifyContent: "center",
    alignItems: "center",
    position: "relative", // AS SHOULD BE UNDER SAFEAREAVIEW
    left: 0,
    right: 0,
    top: 0,
  },
});

Am I on the right track here or is there a better approach?