First Item in Bottom Tab Navigator Automatically Redirects to Last Item in History

Question

This is a strange one that I'm trying to wrap my head around. I'm trying to have the middle screen be the initial screen that gets shown to the user on app load. If I navigate to the left tab (SelfScreen), then the screen loads the JSX briefly, then automatically redirects to the last thing in the web history.

The SelfScreen functional component has no useEffect hooks. It is, for now, a simple component that just returns plain JSX. I can navigate to and from the Profile page without any issue at all. If I set the SelfScreen as the second component that gets rendered, it works just fine, as well.

Expo init > TypeScript template with Navigation

./src/navigation/index.tsx

const BottomTab = createBottomTabNavigator<RootTabParamList>();

function BottomTabNavigator() {
  const {
    ...
  } = useGlobalContext();
  const colorScheme = useColorScheme();


  return (
    <BottomTab.Navigator
      initialRouteName="Connections"
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme].tint,
      }}>
        <BottomTab.Screen
        name="SelfScreen"
        component={SelfScreen}
        options={{
          title: 'SelfScreen',
          unmountOnBlur: true,
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
        }}
      />
      <BottomTab.Screen
        name="Connections"
        component={MainConnection}
        options={({ navigation }: RootTabScreenProps<'Connections'>) => ({
          title: 'Connections',
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
          headerLeft: () => (
            <View>
               <Pressable
                onPress={() => navigation.navigate('ConnectionSelector')}
                style={({ pressed }) => ({
                  opacity: pressed ? 0.5 : 1,
                })}>
                <FontAwesome
                  name="info-circle"
                  size={25}
                  color={Colors[colorScheme].text}
                  style={{ marginRight: 15 }}
                  />
              </Pressable>
            </View>
          ),
          headerRight: () => (
            <View style={{flexDirection: 'row'}}>
              <Pressable
                onPress={() => navigation.navigate('ModalNotifications')}
                style={({ pressed }) => ({
                  opacity: pressed ? 0.5 : 1,
                })}>
                <FontAwesome
                  name="info-circle"
                  size={25}
                  color={Colors[colorScheme].text}
                  style={{ marginRight: 15 }}
                  />
              </Pressable>
              <Pressable
                onPress={() => navigation.navigate('ModalWriteBid')}
                style={({ pressed }) => ({
                  opacity: pressed ? 0.5 : 1,
                })}>
                <FontAwesome
                  name="info-circle"
                  size={25}
                  color={Colors[colorScheme].text}
                  style={{ marginRight: 15 }}
                  />
              </Pressable>
            </View>
          ),
        })}
      />
      <BottomTab.Screen
        name="Profile"
        component={Profile}
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
        }}
      />
    </BottomTab.Navigator>
  );
}

./src/navigation/LinkingConfiguration.tsx

import { LinkingOptions } from '@react-navigation/native';
import * as Linking from 'expo-linking';

import { RootStackParamList } from '../types';

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: [Linking.makeUrl('/')],
  config: {
    screens: {
      Root: {
        screens: {
          Connections: {
            screens: {
              TabOneScreen: 'one',
            },
          },
          SelfScreen: {
            screens: {
              SelfScreen: 'two',
            },
          },
          Profile: {
           screens: {
             ProfileScreen: "three",
           } 
          }
        },
      },
      ConnectionSelector: 'ConnectionSelector',
      Modal: 'modal',
      ... // more modals
      NotFound: '*',
    },
  },
};

export default linking;