Error: Couldn’t find a navigation context. Have you wrapped your app with ‘NavigationContainer’? See https://reactnavigation.org/docs/getting-started for setup instructions.

I keep getting the error above wherever I place my MonoProvider. I am new to mobile development and I am using expo SDK 50 with the new expo router. While reading the documentation. I understand that the Navigation Container is being completely handled by the expo router. What is the best possible solution?

Link to GitHub package : withmono/connect-react-native

I tried to manually add a Navigation container to my root navigation, I got another error :

Error: Looks like you have nested a ‘NavigationContainer’ inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass ‘independent={true}’ explicitly. Note that this will make the child navigators disconnected from the parent and you won’t be able to navigate between them.

I added the prop independednt={true} and it error was gone but I was still left with the main navigation error context.

export default function RootLayout() {
  const [loaded, error] = useFonts({
    BricolageGrotesque: require("../assets/fonts/BricolageGrotesque/BricolageGrotesque_VariableFont_wght.ttf"),
    ...FontAwesome.font,
  });

  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  const config = {
    publicKey: process.env.EXPO_PUBLIC_MONO_PUBLIC_KEY as string,
    scope: "auth",
    data: {
      customer: { id: "9876554432345678" },
    },
    onClose: () => alert("Widget closed"),
    onSuccess: (data: any) => {
      const code = data.getAuthCode();
      console.log("Access code", code);
    },
    onEvent: (eventName: any, data: any) => {
      // optional
      console.log(eventName);
      console.log(data);
    },
  };

  return (
    <MonoProvider {...config}>
      <NavigationContainer>
        <Stack
          initialRouteName="/(authenticated)/(tabs)"
          screenOptions={{
            headerShown: false,
          }}
        >
          <Stack.Screen name="index" options={{ title: "index" }} />
          <Stack.Screen name="onboarding" options={{ title: "onboarding" }} />
          <Stack.Screen name="signUp" options={{ title: "signup" }} />
          <Stack.Screen name="forgot" options={{ title: "forgot" }} />
          <Stack.Screen
            name="(authenticated)"
            options={{ headerShown: false }}
          />
          <Stack.Screen name="help" options={{ presentation: "modal" }} />
        </Stack>
      </NavigationContainer>
    </MonoProvider>
  );
}