reactnavigation Header bar custom style with top left/right radius does not seem to apply

Question

I am trying to match my UI designs by adding a top radius on the left/right side. It's a slight color variation of shades of dark blue:

However, when I try to style my header, the radius doesn't seem to appear. I have a custom StatusBar component for iOS based on this implementation: How to set iOS status bar background color in React Native?

Here's my Stack Navigator with topRadius custom style based on other stackoverflow suggestions:

const topRadius = {
  position: 'absolute',
  background: 'transparent',
  top: 0,
  left: 0,
  right: 0,
  borderBottomRightRadius: 20,
  borderBottomLeftRadius: 20,
};
const HomeStack = createNativeStackNavigator<HomeStackParams>();

export function HomeNavigator(): JSX.Element {
  const styles = HomeStackStyles();

  return (
    <HomeStack.Navigator
      screenOptions={{
        headerStyle: styles.headerStyles,
        headerBackVisible: false,
      }}
    >
      <HomeStack.Screen
        name={SCREENS[SCREEN_NAME.INSPECTIONS].name}
        component={SCREENS[SCREEN_NAME.INSPECTIONS].component}
      />
      <HomeStack.Screen
        name={SCREENS[SCREEN_NAME.ACCOUNT].name}
        options={{
          title: '',
          headerShadowVisible: false,
          headerStyle: {
            ...styles.headerStyles,
            ...topRadius,
          },
          headerLeft: () => <GoBack />,
        }}
        component={SCREENS[SCREEN_NAME.ACCOUNT].component}
      />
    </HomeStack.Navigator>
  );
}

Here is the output: