React Navigation v6 stack navigator with headerLargeTitle collapsing too fast

In my app I am trying to use React Navigation's stack navigator with headerLargeTitle and headerTransparent enabled.

My implementation looks like this:

Navigator.tsx

<HomeStack.Navigator
  initialRouteName="ScreenA"
  screenOptions={({ navigation, route }) => ({
    title: 'My app',
    headerTransparent: true,
    headerBlurEffect: 'light',
    headerLargeTitleShadowVisible: false,
    headerLargeTitle: true,
    headerSearchBarOptions: {
      autoCapitalize: 'none',
      obscureBackground: false,
    },
  })}
>
  <HomeStack.Screen
    name="ScreenA"
    component={ScreenA}
  />
</HomeStack.Navigator>

ScreenA returns:

const headerHeight = useHeaderHeight();

return (
<>
  {isReady && (
    <ScrollView
      contentInset={{
        top: headerHeight * 2,
      }}
      style={{
        backgroundColor: 'red',
      }}
    >
      <View.Base
        style={{
          height: 900,
          width: '100%',
          backgroundColor: 'yellow',
        }}
      />
    </ScrollView>
  )}
</>
);

This currently produces the following output:

Video example

As you can see, the header collapses way too fast and I am unable to figure out why, sadly.

When setting headerTransparent to false, it has an issue with the collapsing effect to not "snap", so something's off here.

Also, the headerHeight doesn't seem to return the correct height for large title-headers. Not sure of that has something to do with this.