How to add button on header in nested stack navigation in react native

I am trying to add a button on right side of a header in one of the stack navigation in my app but the problem is its not working.

Here is my code.I don't know why this is not working

App.tsx

<AppStack.Screen            options={{              headerShown: false,            }}            name="MyProfile"            component={TabNavigation}          /><AppStack.Screen            name="CommunityStack"            component={CommunityStack}          />

CommunityHub.tsx

const CommunityStack = () => {  return (<Stack.Navigator screenOptions={({ navigation }) => ({        title: "Community Hub",        headerRight: () => {          return (<Box marginHorizontal="s"><RoundedBorderButton                label="For Members"                onPress={() => navigation.navigate("Register")}              /></Box>          );        },      })}><Stack.Screen name="CommunityHub" component={CommunityHub} /><Stack.Screen name="KarawarDetail" component={KarawarDetail} /><Stack.Screen name="CommunityMember" component={CommunityMember} /></Stack.Navigator>  );};