Expo Router does not render the child components but renders the tabs

Question

I have an expo app that i had to run expo prebuild and then expo run:android on. I am using Clerk for auth and expo router. This app is based on the tabs template. My root _layout.tsx looks like this:

export function InitialLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
    ...FontAwesome.font,
  });

  const segments = useSegments();
  const router = useRouter();
  const { isLoaded, isSignedIn } = useAuth();

  useEffect(() => {
    if (!loaded || !isLoaded) return;

    const inProtectedGroup = segments[0] === "(tabs)";
    if (isSignedIn && !inProtectedGroup) {
      return router.push("/(tabs)");
    } else if (!isSignedIn) {
      return router.push("/(auth)/login");
    }
  }, [isSignedIn]);

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!isLoaded || !loaded) {
    return (
      <SafeAreaView>
        <View style={tw`flex justify-center items-center h-full`}>
          <ActivityIndicator size="large" color={Colors.brandColor} />
        </View>
      </SafeAreaView>
    );
  }

  return <Slot />;
}

export default function RootLayout() {
  const colorScheme = useColorScheme();

  return (
    <ClerkProvider publishableKey={CLERK_KEY} tokenCache={tokenCache}>
      <GestureHandlerRootView>
        <ThemeProvider
          value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
        >
          <SafeAreaView>
            <InitialLayout />
          </SafeAreaView>
        </ThemeProvider>
      </GestureHandlerRootView>
    </ClerkProvider>
  );
}

Inside the (tabs) folder, the _layout.tsx looks like this:

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          tabBarLabel: "Home",
          title: "Tab One",
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
        }}
      />
      <Tabs.Screen
        name="two"
        options={{
          tabBarLabel: "Away",
          title: "Tab Two",
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
        }}
      />
    </Tabs>
  );
}

Then I have index.tsx and two.tsx (these came with the template). Before adding clerk routing worked fine. I added clerk and the routing works fine when user is not logged in (they are sent to (auth)/login). But once I login to the app, I see the two tab button on the very top of the screen and don't see any component being rendered when in fact i have index.tsx. I have attached a screenshot too.