Unable to align the content to the top of the screen - react-native

Question

I'm writing a react native code where I'm trying to split the screen into 2. There are 3 tabs, and based on the tab I click, I need to display the content. Here My issue is, the content is getting displayed. But the content displayed is not from the top of the screen.
Here is my code.
import { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
const App = () => {
const [facetGroup, setFacetGroup] = useState([
{ name: 'tab 1', index: 1, description: 'tab one description' },
{ name: 'tab 2', index: 2, description: 'tab two description' },
{ name: 'tab 3', index: 3, description: 'tab three description' },
]);
const [selectedIndex, setSelectedIndex] = useState(1);
const handlePress = (index) => {
setSelectedIndex(index);
};
return (
<View style={styles.mainContainer}>
<View style={{ flexDirection: 'col' }}>
{facetGroup.map((item: any) => (
<View key={item.index} style={styles.menuContainer}>
<TouchableOpacity
onPress={() => handlePress(item.index)}
style={styles.title}>
<Text>{item.name}</Text>
</TouchableOpacity>
</View>
))}
</View>
<View>
{facetGroup.map((item: any) => (
<View key={item.index} style={styles.descContainer}>
<View style={{ marginLeft: 40 }}>
{selectedIndex === item.index && <Text>{item.description}</Text>}
</View>
</View>
))}
</View>
</View>
);
};
export default App;
const styles = StyleSheet.create({
mainContainer: { flex: 1, height: 500, flexDirection: 'row' },
menuContainer: {
backgroundColor: '#fff',
textAlign: 'center',
height: 40,
border: '1px solid black',
padding: 20,
},
descContainer: {
backgroundColor: '#fff',
height: 400,
marginTop: 0,
justifyContent: 'flex-start',
},
});
And here is working fiddle. Please let me know how can I fix this.
Thanks