React Navigation (native): Overflow visible not working on custom header

Question

I'm implementing a custom header for @react-navigation/native-stack. Using React Navigation v6. One of the elements within the custom header has a native shadow on iOS added (via the style prop). The shadow is a tad bigger than the header and unfortunately, I can't get it to display beyond the boundaries of the header. Of course, I've tried using overflow: visible on basically every component in the tree, but no success. The shadow is clipped off:

Here's my custom header:

function CustomHeader(props: NativeStackHeaderProps) {
  const { options, route, navigation } = props;

  const insets = useSafeAreaInsets();
  const headerHeight = Helpers.getHeaderHeight(insets);

  return (
    <View style={{
      height: headerHeight,
      paddingTop: insets.top,
      width: '100%',
      backgroundColor: Colors.white,
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingLeft: 20,
      paddingRight: 20,
      overflow: 'visible',
    }}
    >
      <View style={{
        flex: 1, display: 'flex', alignItems: 'flex-start',
      }}
      >
        { options.headerLeft ? options.headerLeft({ canGoBack: false }) : (
          <TouchableOpacity
            onPress={() => route.name === 'Home'
              ? null
              : navigation.reset({ index: 0, routes: [{ name: 'Home' }] })}
          >
            <Image
              style={{ width: Sizing.logo, height: Sizing.logo }}
              source={Logo}
            />
          </TouchableOpacity>
        )}
      </View>
      <Text style={{
        textAlign: 'center', color: Colors.purple,
      }}
      >
        {(options.title || route.name).toUpperCase()}
      </Text>
      <View style={{
        flex: 1, display: 'flex', alignItems: 'flex-end', overflow: 'visible',
      }}
      >
        { options.headerRight ? options.headerRight({ canGoBack: false }) : null}
      </View>
    </View>
  );
}

The button on the right with the shadow is passed in through the headerRight option and contains this shadow style:

nativeShadow: {
  shadowColor: Colors.gray,
  shadowOffset: { width: 0, height: 8 },
  shadowRadius: Colors.shadows.gray.distance,
  shadowOpacity: 0.5,
},

Any idea what I could try next? I don't want to increase the headers' height since this would break the layout elsewhere.