Header not scrolling

I have following code snapshot for App.tsx,

const Stack = createNativeStackNavigator();const MainStackNavigator = () => (<Stack.Navigator screenOptions={{ headerShown: false }}><Stack.Screen name="Home" component={Home} /></Stack.Navigator>);const App: React.FC = () => {  return (<SafeAreaProvider><Contexts><NavigationContainer><ScrollView contentContainerStyle={styles.scrollViewContent}><Header /><View style={styles.content}><MainStackNavigator /></View><Footer /></ScrollView></NavigationContainer></Contexts></SafeAreaProvider>  );};const styles = StyleSheet.create({  scrollViewContent: {    flexGrow: 1,    // justifyContent: 'flex-start',  },  content: {    flex: 1,  },});

I have Header.tsx

const Header: React.FC = () => {    return (<View style={styles.header}><Pressable onPress={() => navigation.navigate('Home')}><Image source={logo} style={styles.logo} /></Pressable>            {citiesList.length > 0 ? (<CitySelection />            ) : (<ActivityIndicator style={styles.spinner} />            )}</View>    );}const styles = StyleSheet.create({    header: {        backgroundColor: 'black',        paddingVertical: 10,        paddingHorizontal: '5%',        flexDirection: 'row',        alignItems: 'center',        justifyContent: 'space-between',    },    logo: {        height: 50,        width: 100,        resizeMode: 'contain',    },    cityDropdown: {        flexDirection: 'row',        alignItems: 'center',    },    cityText: {        color: 'white',        marginLeft: 10,    },    spinner: {        marginLeft: 10,    },    navButton: {        height: '100%',        justifyContent: 'center',        marginHorizontal: 10,    },    navButtonIcon: {        height: '100%',        paddingHorizontal: 10,        justifyContent: 'center',    },    navLinks: {        flexDirection: 'row',        alignItems: 'center',        height: '100%',    },    navText: {        color: 'white',        fontSize: 16,    },    icon: {        marginHorizontal: 15,        fontWeight: '100',    },    nameText: {        fontStyle: 'italic',        fontWeight: 'bold',    },});

My Header is not scrolling with the content. It's stuck on top of the browser hiding content when I scroll the web page. What am I missing here?

I tried different flex settings, justifyContent: 'flex-start' etc but even that didn't work. I have put the Header component in scrollview.