React Native — React-Navigation back button on wrong side of appbar?

Question

Okay so I'm just jumping into React Native and I'm going through the docs with the react-navigation package. Whenever a screen is pushed onto the stack, the animation goes from right-left by default—Also I'm noticing the back button is on the right side of the appbar instead of the left be default. Is this by design or have I set something up incorrectly?

Also ignore the FC I'm using, I know it's not recommended but I'm just getting a feel for RN 😅

See image and code below:

import { StatusBar } from "expo-status-bar";
import { Button, StyleSheet, Text, View } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { BaseNavigationContainer } from "@react-navigation/native";
import { FC } from "react";
import { StackScreenProps } from "./Types";

const Home: FC<StackScreenProps> = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Hello World </Text>
      <Button
        title="Switch Page"
        onPress={() => {
          navigation.navigate("About");
        }}
      />
    </View>
  );
};

const About: FC<StackScreenProps> = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Learn the Process First</Text>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
};

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <BaseNavigationContainer>
      {/* @ts-ignore */}
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="About" component={About} />
      </Stack.Navigator>
    </BaseNavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});