React native – Error: Looks like you have nested a 'NavigationContainer' inside another

This is the full error:

Error: Looks like you have nested a NavigationContainer inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass ‘independent={true}’ explicitly. Note that this will make the child navigators disconnected from the parent and you won’t be able to navigate between them.

I don’t see why I am getting this error as I only have one NavigationContainer

index.js

import { useState, useEffect } from 'react';
import { View, ScrollView, SafeAreaView, Text, Button } from 'react-native';
import { useRouter } from 'expo-router';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'

import Home from './home';
import styles from '../myComponents/common/header/header/header.style';
import { COLORS, icons, images, FONT, SIZES } from '../constants';
import { ScreenHeaderBtn, TimeSlider, SessionBtn } from '../myComponents';

const Stack = createNativeStackNavigator();

function App() {
    const router = useRouter();

    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={Home} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default App;

home.js

import { useState, useEffect } from 'react';
import { View, ScrollView, SafeAreaView, Text, Button } from 'react-native';
import { Stack, useRouter } from 'expo-router';

import styles from '../myComponents/common/header/header/header.style';
import { COLORS, icons, images, FONT, SIZES } from '../constants';
import { ScreenHeaderBtn, TimeSlider, SessionBtn } from '../myComponents';

const Home = () => {
    const router = useRouter();

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightBeige }}>
            <Stack.Screen
                options={{
                    headerStyle: { backgroundColor: COLORS.lightBeige },
                    headerShadowVisible: true,
                    headerLeft: () => (
                        <ScreenHeaderBtn iconUrl={icons.menu} dimension="60%" />
                    ),
                    headerTitle: () => (
                        <Text style={styles.headerStyle}>
                            Flowtime
                        </Text>
                    ),
                    headerTitleAlign: 'center',
                }}
            />
            <ScrollView showsVerticalScrollIndicator={false}>
                <View style={{ flex: 1, padding: SIZES.medium, }}>

                    <View style={{ alignItems: 'center', padding: SIZES.xLarge }}>
                        <SessionBtn />
                    </View>
                    <View style={{ alignItems: 'center', padding: SIZES.xLarge }}>
                        <TimeSlider />
                    </View>

                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default Home;

_layout.js

import { Stack } from 'expo-router';
import { useCallback } from 'react';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

const Layout = () => {
    const [fontsLoaded] = useFonts({
        MontBold: require('../assets/fonts/Montserrat-Bold.ttf'),
        MontMed: require('../assets/fonts/Montserrat-Medium.ttf'),
        MontReg: require('../assets/fonts/Montserrat-Regular.ttf'),
    })

    const onLayoutRootView = useCallback(async () => {
        if(fontsLoaded) {
            await SplashScreen.hideAsync();
        }
    }, [fontsLoaded]
    )

    if(!fontsLoaded) return null;

    return <Stack onLayout={onLayoutRootView}/>;
}

export default Layout;

I tried moving the Stack.Screen header in home.js around into the NavigationContainer in index.js but then I get another error that the Stack.Screen doesn’t have a name or and doesn’t have a proper component. I’m not sure how else to fix this error as I only have one NavigationContainer. What’s even more confusing is that it looks like the React navigation documentation as well.