Bottom navigator not switching tabs in React Native

Okay so I am new to React Native so I believe that I just have a structural issue but I can not seem to realize what I am doing wrong.

I am trying to have 4 tabs but when I click on each tab it is not bringing me to the next page. So on each click of a tab nothing happens. What am I not understanding about this?

My files are as follows:

App.tsx

export default function App() {  const isLoadingComplete = useCachedResources();  const colorScheme = useColorScheme();  let [fontsLoaded, error] = useFonts({    CormorantGaramond_300Light,    CormorantGaramond_300Light_Italic,    CormorantGaramond_400Regular,    CormorantGaramond_400Regular_Italic,    CormorantGaramond_500Medium,    CormorantGaramond_500Medium_Italic,    CormorantGaramond_600SemiBold,    CormorantGaramond_600SemiBold_Italic,    CormorantGaramond_700Bold,    CormorantGaramond_700Bold_Italic  });  if (!isLoadingComplete) {    return null;  } else if (!fontsLoaded){    return <AppLoading />;  } else {    return (<SafeAreaProvider><Navigation colorScheme={colorScheme} /><StatusBar style="dark" /></SafeAreaProvider>    );  }}

index.tsx

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {  return (<NavigationContainer      linking={LinkingConfiguration}><RootNavigator /></NavigationContainer>  );}// A root stack navigator is often used for displaying modals on top of all other content// Read more here: https://reactnavigation.org/docs/modalconst Stack = createStackNavigator<RootStackParamList>();function RootNavigator() {  return (<Stack.Navigator screenOptions={{ headerShown: false }}><Stack.Screen name="Root" component={BottomTabNavigator} /><Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} /></Stack.Navigator>  );}

BottomTabNavigator.tsx

const BottomTab = createBottomTabNavigator<BottomTabParamList>();export default function BottomTabNavigator() {  const colorScheme = useColorScheme();  return (<BottomTab.Navigator      initialRouteName="Meditation"      tabBarOptions={{ activeTintColor: "#D3AAE2", activeBackgroundColor: "white", inactiveBackgroundColor: "white" }}><BottomTab.Screen        name="Yoga"        component={TabOneNavigator}        options={{          tabBarIcon: ({ color }) => <MaterialCommunityIcons name="yoga" size={24} color={color}/>,        }}      /><BottomTab.Screen        name={"Meditation"}        component={TabTwoNavigator}        options={{          tabBarIcon: ({ color }) => <Ionicons name="planet" size={24} color={color} />,        }}      /><BottomTab.Screen        name="Food"        component={TabThreeNavigator}        options={{          tabBarIcon: ({ color }) => <MaterialCommunityIcons name="fruit-pineapple" size={24} color={color} />,        }}      /><BottomTab.Screen        name="Profile"        component={TabFourNavigator}        options={{          tabBarIcon: ({ color }) => <MaterialIcons name="face" size={24} color={color} />,        }}      /></BottomTab.Navigator>  );}// You can explore the built-in icon families and icons on the web at:// https://icons.expo.fyi/function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>['name']; color: string }) {  return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;}// Each tab has its own navigation stack, you can read more about this pattern here:// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tabconst TabOneStack = createStackNavigator<TabOneParamList>();function TabOneNavigator() {  return (<TabOneStack.Navigator><TabOneStack.Screen        name="Yoga"        component={TabOneScreen}        options={{ headerShown: false }}      /></TabOneStack.Navigator>  );}const TabTwoStack = createStackNavigator<TabTwoParamList>();function TabTwoNavigator() {  return (<TabTwoStack.Navigator><TabTwoStack.Screen        name="Meditation"        component={TabTwoScreen}        options={{ headerShown: false }}      /></TabTwoStack.Navigator>  );}const TabThreeStack = createStackNavigator<TabThreeParamList>();function TabThreeNavigator() {  return (<TabThreeStack.Navigator><TabThreeStack.Screen        name="Food"        component={TabThreeScreen}        options={{ headerShown: false }}      /></TabThreeStack.Navigator>  );}const TabFourStack = createStackNavigator<TabFourParamList>();function TabFourNavigator() {  return (<TabFourStack.Navigator><TabFourStack.Screen        name="Profile"        component={TabFourScreen}        options={{ headerShown: false }}      /></TabFourStack.Navigator>  );}

TabOneScreen.tsx - all screen pages look like this with different numbers of course

export default function TabOneScreen() {  return (<View style={styles.container}><Text style={styles.title}>Tab One</Text><View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" /><EditScreenInfo path="/screens/TabOneScreen.tsx" /></View>  );}

types.tsx

export type RootStackParamList = {  Root: undefined;  NotFound: undefined;};export type BottomTabParamList = {  Yoga: undefined;  Meditation: undefined;  Food: undefined;  Profile: undefined;};export type TabOneParamList = {  Yoga: undefined;};export type TabTwoParamList = {  Meditation: undefined;};export type TabThreeParamList = {  Food: undefined;};export type TabFourParamList = {  Profile: undefined;};

LinkingConfiguration

export default {  prefixes: [Linking.makeUrl('/')],  config: {    screens: {      Root: {        screens: {          Yoga: {            screens: {              TabOneScreen: 'one',            },          },          Meditation: {            screens: {              TabTwoScreen: 'two',            },          },          Food: {            screens: {              TabThreeScreen: 'three',            },          },          Profile: {            screens: {              TabFourScreen: 'four',            },          },        },      },      NotFound: '*',    },  },};