When I use router.replace in my application, it complains: “The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn’t match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.”

My directory structure is as follow:
my app’s structure

I followed the documents and examples from expo router for Stack.
I have this for my app/_layout.tsx

<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
  <Stack>
    <Stack.Screen name="(auth)" options={{ headerShown: false }} />
    <Stack.Screen name="(protected)" options={{ headerShown: false }} />
  </Stack>
</ThemeProvider>

(I read that I should use AuthProvider and display screen based on the login state, but I have not come to that point yet since I just want a minimal working app first).

Then I have my (protected)/_layout.tsx as follow:

<Stack>
    <Stack.Screen name="submission" options={{headerTitle: "Submission"}} />
</Stack>

According to what I have read from documents, this should be correct already.
However when I do router.replace in (auth)/index.tsx to (protected)/submission/index.tsx, the app keeps complaining that url is not in root navigator (even though, it can replace the / with /submission successfully).
My code for router replace is as follow:

// router is from userRouter() of expo-router
router.replace({
  pathname: '/submission',
  params: { accessToken, refreshToken }
});

May you give me some hints on what might be wrong here?

What I have tried?
I have read the documents and examples from expo-router then try to structure the folders in different ways to try out my understanding about the usage of expo-router.

What I’m expecting?
The application should not give the complain when route to /submission