How do i get change border radius in navigation in a group? If the group is just showing a screen of a screen component then the border radius gets applied but when i put it in a navigation stack then it overwrites.. Any help would be appreciated!

This is my code:

const AppStackNavigator = createNativeStackNavigator();

 <AppStackNavigator.Group
            screenOptions={{
              presentation: 'modal',
              contentStyle: {borderRadius: 50},
              headerShown: false,
            }}>
            <AppStackNavigator.Screen
              name={APP_MODAL.someStack} //doesnt work
              component={SomeStack}
              options={{headerShown: false}}
            />
 <AppStackNavigator.Screen
              name={APP_MODAL.someScreen} //works!
              component={SomeScreen}
              options={{headerShown: false}}
            />
</AppStackNavigator.Group>

const SomeModalNavigator = createNativeStackNavigator();

export const SomeStack = () => {
  return (
 //if i put <View > here with border radius it works i assume the bottom navigators is overriding it?
    <SomeModalNavigator.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: true,
        contentStyle: {borderRadius: 50}, //doesnt work
      }}>
      <SomeModalNavigator.Screen
        name={APP_MODAL.modal}
        component={SomeModalScreen}
        options={{}}
      />
     
    </SomeModalNavigator.Navigator>
  );
};