Вопрос о настраиваемом заголовке в React Navigation v5 (не кликабельная кнопка возврата)

Привет, я использую React navigation v5. Я пытаюсь реализовать собственный заголовок для определенного экрана. Итак, мой собственный заголовок выглядит так

CustomHeader.js

export function CustomHeader({props}) {
  const {scene, previous, navigation} = props;
  const opacity = scene.route.params.opacity;

  return (
    <React.Fragment>
      <Animated.View style={[styles.headerStyle, {opacity}]}>
        <View style={styles.influencerNameContainer}>
          <Text style={styles.influencerName}>
            {scene.route.params.influencer.user.name}
          </Text>
        </View>
      </Animated.View>

      {previous ? (
/* This is a back button */
        <Button
          style={[styles.iconButton, {left: 0}]}
          icon={BackIcon}
          onPress={() => {navigation.goBack}
        />
      ) : (
        undefined
      )}
    </React.Fragment>
  );
}

Навигатор выглядит так

export function HomeStack() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      headerMode="screen"
      style={{backgroundColor: 'yellow'}}>

      <Stack.Screen
        name="InfluencerScreen"
        component={InfluencerScreen}
        options={{
          header: props => <CustomHeader props={props} />,
        }}
      />
    </Stack.Navigator>
  );
}

Он отображает настраиваемые заголовки и настраиваемую кнопку возврата, но кнопку возврата нельзя щелкнуть. Я попробовал.

<Stack.Screen
        name="InfluencerScreen"
        component={InfluencerScreen}
        options={{
          header: props => <CustomHeader props={props} />,
          headerLeft: () => (
            <Button title="Back Button" onPress={() => alert('Pressed')} />
          )
        }}
      />

С этим кодом он вообще не отображает кнопку возврата с настраиваемым заголовком. Но он показывает настраиваемую кнопку возврата, когда я удаляю настраиваемый заголовок (header: props =>).

Что мне не хватает?