Glitchy large header behavior when combaining SafeArea with Scroll

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { ScrollView, Text, View, SafeAreaView } from 'react-native';
import {
  createNativeStackNavigator,
} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function NativeNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{
            headerLargeTitle: true,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Card = ({text}) => (
  <View style={{
    height: 100,
    borderWidth: 1,
    borderColor: "#f0f",
    justifyContent: 'center',
    alignItems: 'center',
  }}>
    <Text style={{fontSize: 30}}>{text}</Text>
  </View>
);

export function Home() {
  const content = (
    <>
      <Card text="1" />
      <Card text="2" />
      <Card text="3" />
      <Card text="4" />
      <Card text="5" />
      <Card text="6" />
      <Card text="7" />
    </>
  );

  // ScrollView adjusted
  // return (
  //   <ScrollView contentInsetAdjustmentBehavior="automatic">
  //     {content}
  //   </ScrollView>
  // );

  // SafeAreaView with ScrollView
  return (
    <SafeAreaView>
      <ScrollView>
        {content}
      </ScrollView>
    </SafeAreaView>
  );
}