How to move route files into route folders in React Native Expo

I have a React native expo application. According to the official documentation, pretty much every file in the /app folder is supposed to be a route. So the file app/settings.tsx would map to the settings route.

This is the folder structure of my project:

In the _layout.tsx file, I have the following code:

import { Stack } from "expo-router";export default function RootLayout() {    return (<Stack initialRouteName="settings"><Stack.Screen name="settings" /><Stack.Screen name="index" options={{ headerShown: false }} /></Stack>    );}

And in the settings/index.tsx file, I have this code:

import { Text, View } from "react-native";export default function Settings() {    return (<View            style={{                flex: 1,                justifyContent: "center",                alignItems: "center",            }}><Text>Edit app/settings/index.tsx to edit this screen.</Text></View>    );}

I want to be able to have a route inside a folder so that I can keep related styles and other files organized within a route. According to the docs, this would be done using the following pattern: app/settings/index.tsx. This, however, leads to an error when I try to load the routes in the stack, saying that the route does not exist.

What am I doing wrong here, and how can I fix it so that the route does appear? Thank you in advance for any help provided.