React Navigation headerRight not visible

Question

I am trying to render a button right to the screen header title. But I am not getting the desired result. I have referred react-navigation official doc. This is the screenshot for my screen.
This is the code snippet for my navigation.

 <NavigationContainer>
            <Stack.Navigator screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.header.backgroundColor,
                },
                headerTintColor: Colors.header.fontColor,
                headerTitleAlign: 'left',
                headerTitleStyle: {
                    fontSize: Fonts.size.regular
                }
            }}>
                <Stack.Screen name='Home' component={Home} options={{
                    headerTitle: 'Seguro',
                    headerRight: () => {
                        <Button              // I want to render this button
                            onPress={() => console.log('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    }
                }} />
                <Stack.Screen name='Login' component={Login} />
            </Stack.Navigator>
        </NavigationContainer>

Answer 1

Problem is you are not returning anything.

Option 1 : implicit return..enclosing in brackets makes it implicit return

<Stack.Screen name='Home' 
     component={Home} 
     options={{
                    headerTitle: 'Seguro',
                    headerRight: () => (
                        <Button             
                            onPress={() => console.log('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    )
            }} />

Option 2: Explicit return

<Stack.Screen name='Home' 
     component={Home} 
     options={{
                    headerTitle: 'Seguro',
                    headerRight: () => { 
                       return (
                        <Button             
                            onPress={() => console.log('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    )
              }
            }} />