Warning: Error: A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found 'Screen' for the screen 'index'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.

This is my layout Organisation

import { View, Text } from "@components/Themed";
import { Stack } from "expo-router";
import React from "react";

const Layout = () => {
    return (
        <View className="flex-1">
            <Stack
                screenOptions={{
                    headerShown: false,
                }}
            >
                <Stack.Screen name="index" />
            </Stack>
        </View>
    );
};
export default Layout;

And the _layout.tsx and index.tsx are in the same directory.

I'm using "@react-navigation/native": "^7.0.3", and "expo-router": "~4.0.6". This is using File-based Navigation Router.

I have tried updating @react-navigation/native, ran --expo prebuild.

I have tried a bunch of anisation tactics but none has worked. The moment I use a Stack or Tabs, the app crashes.