Creating a header in react-native and nesting multiple tabs within it

I am new to react-native, and I'm trying to design a header for a screen that incorporates a back button, a title, and two tabs. While I have a bottom tab layout that applies to all my screens, I simply want to create a top tab layout that can be nested within the current screen I am on.

My problem is rather weird, if I do not nest the Tab.navigator within my header view, the tabs render just fine, although there is a blank space in between. It is why I am trying to nest my tabs within the header. However, when I attempt to do so, the rendering gets weird, with the tabs extending past the size of the screen?

For example, when I use alignItems: 'center' to style my header view, it results in the first imagethe two tabs are split in half. If I try alignItems: 'flex-start', only the left tab is shown, while if I try alignItems: 'flex-end', only the right tab is shown . Notably, if I do not use alignItems, the tabs do not show up at all. Below is my code for the screen, could someone explain why such an error occurs, and how I can fix it?

import { View, Text, Button, StyleSheet, TextInput, ScrollView, TouchableOpacity, Platform } from 'react-native';import { useNavigation, NavigationContainer } from '@react-navigation/native';import { HeaderBackButton } from '@react-navigation/elements';import DateTimePicker, { DateTimePickerEvent, Event } from '@react-native-community/datetimepicker';import { createNativeStackNavigator } from '@react-navigation/native-stack';import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';const Tab = createMaterialTopTabNavigator();function FirstTab() {  return (<View style={{...styles.container}}><Text>First Tab Content</Text><View><Text style={styles.descText}>Title</Text><TextInput style={styles.inputText}></TextInput><Text style={styles.descText}>Paid By</Text><TextInput style={styles.inputText}></TextInput></View></View>  );}function SecondTab() {  return (<View style={styles.container}><Text>Second Tab Content</Text></View>  );}export default function group() {  const navigation = useNavigation();  const handleBackButtonPress = () => {    navigation.goBack();  };  return (<View style={styles.container}><View style={styles.header}><View style={{flexDirection: 'row', borderWidth: 2}}><HeaderBackButton tintColor='white' onPress={handleBackButtonPress} /><Text style={styles.headerText}>#Group-Name-Here</Text></View><View>   <Tab.Navigator             screenOptions={({ route }) => ({            tabBarLabelStyle: { fontSize: 16, color: 'white' },            tabBarStyle: { backgroundColor: 'purple' },            tabBarIndicatorStyle: { backgroundColor: 'white' },            tabBarLabel: ({ focused }) => {              let label;              if (route.name === 'FirstTab') {              label = 'First';              } else if (route.name === 'SecondTab') {              label = 'Second';              }            return <Text style={{ color: focused ? 'white' : 'gray' }}>{label}</Text>;            },          })}><Tab.Screen name="FirstTab" component={FirstTab} options={{ tabBarLabel: 'Bills' }} /><Tab.Screen name="SecondTab" component={SecondTab} options={{ tabBarLabel: 'Balances' }} /></Tab.Navigator></View></View></View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: 'black',  },  header: {    backgroundColor: 'purple',    flexDirection: 'column',    alignItems: 'center', //THE LINE THAT CAUSES WEIRD ISSUES?    padding: 8,    marginBottom: 12,    marginTop: 50,  },  headerText: {    // textAlign: 'center',    fontSize: 24,    color: 'white',    marginLeft: 8,  },  descText: {    color: 'grey',    fontSize: 16,    padding: 8,    marginHorizontal: 24,  },  inputText: {    color: 'white',    paddingHorizontal: 8,    fontSize: 20,    marginHorizontal: 24,    borderBottomColor: 'purple',    borderWidth: 2,    marginBottom: 8,  },});