React Navigation 5 Header Options - react-native

Question

How Do I set the Header right property on the <Stack.Navigator> ? I tried it with screenOptions but it is not rendering the headerRight Content on the right of header. I could set it on the parent Navigation Component which is rendering this custom component but in there I am not able to access the navigation prop. Could anyone please help me? Thank You
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen options={options3} name="SellerStackNavigator"
component={SellerStackNavigator} />
</Stack.Navigator>
</NavigationContainer>
const SellerStack = createStackNavigator();
const SellerStackNavigator = ({ navigation, route }) => {
<SellerStack.Navigator
screenOptions={({ route, navigation }) => ({
headerRight: () => (
<View style={{
flexDirection: 'row',
marginRight: 10,
}}>
<TouchableOpacity style={{
backgroundColor: '#fff',
borderRadius: 20,
marginRight: 10,
marginTop: 10,
height: 40,
width: 40,
alignItems: 'center',
justifyContent: 'center',
elevation: 2,
paddingLeft: 10,
}}>
<Image style={{
resizeMode: 'contain',
alignSelf: 'center',
borderWidth: 1,
marginRight: 10,
tintColor: '#000',
width: 15,
height: 18,
}} source={Images.searchImage}/>
</TouchableOpacity>
</View>
)
})}>
.
.
.
.
.
</SellerStack.Navigator>
}

Answer 1

I used more or less your code and is working for me, so if you can make a expo I can check what is really happening https://snack.expo.io/#anthowm/headerright
Anyways you can accesss your navigation from anywhere with useNavigation hook
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
You can do access to it
<NavigationContainer>
{(route, navigation) => {
return <Stack.Navigator>
<Stack.Screen options={options3} name="SellerStackNavigator"
component={SellerStackNavigator} />
</Stack.Navigator>}}
</NavigationContainer>