I have a weird bug on react native app, I wrote a custom header, it appears with the default header. But it's not like 2 headers on top each other, it's just the text.

First one is my custom header like this;

export const HeaderWithBackTitle = ({title}: {title: string}) => {
  const navigation = useNavigation();
  const HeaderOptions: NativeStackNavigationOptions = {
    headerTitle: '',
    headerStyle: {
      backgroundColor: UIColors.darkMode,
    },
    headerLeft: () => (
      <View
        style={{alignItems: 'center'}}
        row
        backgroundColor={UIColors.darkMode}>
        <PressableOpacity marginL-12 onPress={() => navigation.goBack()}>
          <Image
            style={{width: 30, height: 30}}
            source={require('../imgs/backIcon.png')}
          />
        </PressableOpacity>
        <View style={{maxWidth: '85%'}} marginL-30>
          <Text textColor darkGreyBlue regularText>
            {title}
          </Text>
        </View>
      </View>
    ),
  };
  return HeaderOptions;
};

I render it like this;

  <Stack.Screen
        name="Entries"
        component={Entries}
        options={({route}) => HeaderWithBackTitle({title: route.params?.title})}
      />

No idea how it happens.

React Native version; 0.66.3 React Navigation version: ^0.6.6