“Unmatched Route” Error in Expo Router

I am encountering an “Unmatched Route” error when using Expo Router in my application. Below is the structure of my project:

Folder Structure:

app/
  _layout.tsx
  (auth)/
    _layout.tsx
    sign_in.tsx
  (protected)/
    _layout.tsx
    (edit)/
      _layout.tsx
      customer.tsx
      order.tsx
      product.tsx
    (tabs)/
      _layout.tsx
      customers.tsx
      orders.tsx
      products.tsx

Layout Files:

app/_layout.tsx:

import '@/styles/global.css';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';

export const unstable_settings = {
  initialRouteName: '(auth)',
};

export default function Layout() {
  return (
    <>
      <StatusBar style="light" />
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(auth)" />
        <Stack.Screen name="(protected)" />
      </Stack>
    </>
  );
}

app/(auth)/_layout.ts:

import { Redirect, Stack } from 'expo-router';

export const unstable_settings = {
  initialRouteName: 'sign_in',
};

export default function Layout() {
  const session = true;

  if (session) return <Redirect href={'(protected)'} />;

  return <Stack screenOptions={{ headerShown: false }}></Stack>;
}

app/(protected)/_layout.tsx:

import { Stack } from 'expo-router';

export const unstable_settings = {
  initialRouteName: '(tabs)',
};

export default function Layout() {
  return (
    <>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="(edit)" />
      </Stack>
    </>
  );
}

app/(protected)/(edit)/_layout.tsx:

import colors from '@/styles/colors';
import { Stack } from 'expo-router';

export const unstable_settings = {
  initialRouteName: 'customer',
};

export default function EditLayout() {
  return (
    <Stack
      screenOptions={{
        headerTintColor: colors.text.primary,
        headerStyle: {
          backgroundColor: colors.background.primary,
        },
        headerShadowVisible: false,
      }}
    ></Stack>
  );
}

app/(protected)/(tabs)/_layout.tsx:

import { Stack } from 'expo-router';

export default function TabsLayout() {
  return <Stack screenOptions={{ headerShown: false }}></Stack>;
}

I am using the unstable_settings parameter with initialRouteName in each layout, similar to the recommendation in the Expo Router documentation, to set the initial route for each section.

Error Encountered:

Unmatched Route
Page could not be found.

How can I fix this “Unmatched Route” error? Is there a specific configuration I need to adjust to resolve this issue?