React navigation headerRight not rendering

how can I render headerRight in React navigation? I have tried everything that is told in this tutorial: https://reactnavigation.org/docs/header-buttons/

Still not working/rendering on the screen.

const HomeStack = createNativeStackNavigator();
const AuthStack = createNativeStackNavigator();

    <NavigationContainer>
      {isSignedIn ? (
        <Provider store={store}>
          <HomeStack.Navigator
            screenOptions={{
              header: (props) => <CustomNavigationBar {...props} />,
            }}
          >
            <HomeStack.Screen
              name="HomeTabs"
              component={BottomTabs}
              options={({ route }) => ({
                headerTitle: getHeaderTitle(route),
              })}
            ></HomeStack.Screen>
            <HomeStack.Screen
              name={screenRoutes.ADD_EVENT}
              component={Event}
              options={{ headerTitle: "Add event" }}
            ></HomeStack.Screen>
            <HomeStack.Screen
              name={screenRoutes.UPDATE_EVENT}
              component={Event}
              options={{
                headerTitle: "Update event",

//This: 
                headerRight: () => <IconButton icon={"camera"}/>


              }}
            ></HomeStack.Screen>
          </HomeStack.Navigator>
        </Provider>
      ) : (
        <AuthStack.Navigator>
          <AuthStack.Screen name={screenRoutes.SIGN_IN} component={SignIn} />
          <AuthStack.Screen name={screenRoutes.SIGN_UP} component={SignUp} />
        </AuthStack.Navigator>
      )}
    </NavigationContainer>
  );
}