Problem

I have multiple screens under a folder called (onboarding). In this folder there is a _layout.tsx and multiple screens. The issue is that, when I call this (onboarding) folder inside app/_layout.tsx, it does not find the route. The following warning pops out:

[Layout children]: No route named "(onboarding)" exists in nested children: ["_sitemap", "+not-found", "(onboarding)"]

My File/Folder Structure

app/
  _layout.tsx
    (onboarding)/
      _layout.tsx
      LandingPageScreen.tsx
      LoginSignupScreen.tsx
      LoginScreen.tsx
      PhoneVerificationScreen.tsx

app/(onboarding)/_layout.tsx

import React from "react";
import { Stack } from "expo-router";

export default function OnboardingStackLayout() {
  return (
    <Stack>
      <Stack.Screen name="LandingPageScreen" options={{ headerShown: false }} />
      <Stack.Screen name="LoginSignupScreen" options={{ headerShown: false }} />
      <Stack.Screen name="LoginScreen" options={{ headerShown: false }} />
      <Stack.Screen
        name="PhoneVerificationScreen"
        options={{ headerShown: false }}
      />
    </Stack>
  );
}

app/_layout.tsx

import React from "react";
import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(onboarding)" options={{ headerShown: false }} />
    </Stack>
  );
}

I am new to react native app development with expo and appreciate all the help!

I’ve already tried closing the app and re-running the metro bundler many times thinking it might be some build issue.