So I used Create Expo stack for my app, so it isn’t a traditional way of creating a react native project. Im getting this error: Render Error Attempted to navigate before mounting the Root Layout component. Ensure the Root Layout component is rendering a Slot, or other navigator on the first render
Ill list the files in my app folder, let me know if you need to know any additional files.
_layout.tsx (/app):

import { Session } from '@supabase/supabase-js';
import { useFonts } from 'expo-font';
import { Slot, SplashScreen, useRouter, useSegments } from 'expo-router';
import { useEffect, useState } from 'react';
import { TamaguiProvider } from 'tamagui';

import config from '@/tamagui.config';
import { supabase } from '@/utils/supabase';

const InitalLayout = () => {
  const [session, setSession] = useState<Session | null>(null);
  const [initialized, setInitialized] = useState(false);

  const segments = useSegments();
  const router = useRouter();

  const [loaded] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  });

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

  useEffect(() => {
    const { data } = supabase.auth.onAuthStateChange(async (event, session) => {
      console.log('supabase.auth.onAuthStateChange', event, session);

      setSession(session);
      setInitialized(true);
    });

    return () => {
      data.subscription.unsubscribe();
    };
  }, []);

  useEffect(() => {
    if (!initialized) return;

    const inAuthGroup = segments[0] === '(auth)';

    if (session && !inAuthGroup) {
      router.replace('/(auth)');
    } else if (!session) {
      router.replace('/');
    }
  }, [initialized, session]);

  if (!loaded) return null;
  return (
    <TamaguiProvider config={config}>
      <Slot />
    </TamaguiProvider>
  );
};

export default InitalLayout;

index.tsx (/app)

import React from 'react';
import { View, Text, Button } from 'tamagui';

const Page = () => {
  return (
    <View>
      <Text>Page</Text>
      <Button>e</Button>
    </View>
  );
};

export default Page;

_layout.tsx (/app/(auth))

import { Ionicons } from '@expo/vector-icons';
import { Tabs } from 'expo-router';
import React from 'react';

const Layout = () => {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ size, color }) => (
            <Ionicons name="home-outline" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
};

export default Layout;

index.tsx (/home/(app))

import React from 'react';
import { View, Text } from 'react-native';

const Page = () => {
  return (
    <View>
      <Text>Page</Text>
    </View>
  );
};

export default Page;

I don’t know how to solve this issue at all and I don’t understand why I am getting this, so I haven’t really tried much on how I can solve this issue. I am expecting to get no error and show me the index.tsx file in the /app directory.