Adding different header buttons for different screens in react-native nested navigators

Question

I have created a new react-native app using expo and using the tab-bar template. This creates a new app which contains a stack navigator which in turn contains a tab navigator. Pretty much as they explain in Nesting navigators.

So it looks like this:

• Stack.Navigator
  • Tab (Tab.Navigator)
    • Search (Screen)
    • Chat (Screen)
    • Visitors (Screen)
    • Settings (Screen)

What I want to do is to add buttons to the header bar, but depending on what tab is active, I want to have different buttons. E.g. when on the Search-Screen, I need a "filter-button". When on Chat-Screen, I need a "new message button".

How can I do this? So far I only found out how to add buttons to the header which are then displayed on all screens:

From App.js:

            <NavigationContainer ref={containerRef} initialState={initialNavigationState}>
               <Stack.Navigator>
                  <Stack.Screen
                     name="Suche"
                     component={BottomTabNavigator}
                     options={{
                        headerStyle: {
                           backgroundColor: '#2270b9'
                        },
                        headerTitleStyle: {
                           color: 'white'
                        },
                        headerRight: () => (
                           <View style={{ flex: 1, flexDirection: 'row' }}>
                              <Ionicons
                                 style={{ color: 'white', marginRight: 15, marginTop: 5 }}
                                 size={32}
                                 onPress={() => alert('This is a button!')}
                                 name="md-settings"
                                 backgroundColor="#CCC"
                              />
                           </View>
                        ),
                     }}
                  />
               </Stack.Navigator>
            </NavigationContainer>

However I fail to find any way to add this to the individual screens of the BottomTabNavigator instead.

When I try to add the same to the BottomTabNavigator's screens, like so:

    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Suche"
        component={Search}
        options={{
            title: 'Suche',
            tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-search" />,
            headerRight: () => (
               <View style={{ flex: 1, flexDirection: 'row' }}>
                  <Ionicons
                     style={{ color: 'white', marginRight: 15, marginTop: 5 }}
                     size={32}
                     onPress={() => alert('This is a button!')}
                     name="md-settings"
                     backgroundColor="#CCC"
                  />
               </View>
            ),
        }}
      />
      // more screens
    </BottomTab.Navigator>

Just nothing happens.

How can I do this?