I am currently trying to make a linear gradient background on my app and it works as intended but on the right header there's some container that I can't access. Any ideas? I tried changing the headerRightContainerStyle but that only affects the button on the right and not that empty space. It's weird how only the right side is affected too because the header's left side is the effect I desire

Image: <https://ibb.co/cYKj1XV>

Code:

```
...
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      title: "Users Page",
      headerStyle: {
        backgroundColor: "transparent",
      },
      headerRightContainerStyle: {
        backgroundColor: "red",
      },
      headerRight: () => <Button title="Next" color={colors.blue} />,
    });
  }, []);

  return (
    <LinearGradient
      colors={gradientColorsBackground}
      style={styles.gradientBackground}
    >
      <SafeAreaView style={styles.container}>
        <KeyboardAvoidingView
          style={styles.keyboardAvoidingContainer}
          behavior="padding"
        >
          <KeyboardAwareFlatList
            style={styles.usersList}
            data={users}
            keyExtractor={(item) => `${item.id}`}
            renderItem={({ item }) => <Person name={item.name} id={item.id} />}
          />
          <TextInput
            style={styles.input}
            autoFocus={false}
            blurOnSubmit={false}
            placeholder="Type people's names"
            onSubmitEditing={({ nativeEvent: { text } }) => addUser(text)}
            autoCorrect={false}
          />
        </KeyboardAvoidingView>
      </SafeAreaView>
    </LinearGradient>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
  },
  gradientBackground: {
    flex: 1,
    width: "100%",
    height: "100%",
    alignItems: "center",
  },
  input: {
    height: 50,
    backgroundColor: "orange",
    width: "100%",
    borderStyle: "solid",
    borderWidth: 3,
  },
  keyboardAvoidingContainer: {
    flex: 1,
  },
  usersList: {
    flex: 1,
    width: "100%",
    backgroundColor: colors.blue,
  },
});
...

```