Another navigator is already registered for this container. You likely have multiple navigators under a single NavigationContainer

Issue:Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.

Code:

import React, { useState } from 'react';import { View, Text, Button } from 'react-native';import { BottomNavigation } from 'react-native-paper';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';// Home Screensfunction HomeScreen({ navigation }) {  return (<View><Text>Home Screen</Text><Button title="Go to Details" onPress={() => navigation.navigate('Details')} /></View>  );}function DetailScreen() {  return (<View><Text>Detail Screen</Text></View>  );}// Profile Screensfunction ProfileScreen({ navigation }) {  return (<View><Text>Profile Screen</Text><Button title="Go to Profile Details" onPress={() => navigation.navigate('ProfileDetails')} /></View>  );}function ProfileDetailScreen() {  return (<View><Text>Profile Detail Screen</Text></View>  );}// Settings Screensfunction SettingsScreen() {  return <Text>Settings Screen</Text>;}// Home Stackconst HomeStack = createStackNavigator();function HomeStackScreen() {  return (<HomeStack.Navigator><HomeStack.Screen name="Home" component={HomeScreen} /><HomeStack.Screen name="Details" component={DetailScreen} /></HomeStack.Navigator>  );}// Profile Stackconst ProfileStack = createStackNavigator();function ProfileStackScreen() {  return (<ProfileStack.Navigator><ProfileStack.Screen name="Profile" component={ProfileScreen} /><ProfileStack.Screen name="ProfileDetails" component={ProfileDetailScreen} /></ProfileStack.Navigator>  );}export default function App() {  const [index, setIndex] = useState(0); // Tab index state  const [routes] = useState([    { key: 'home', title: 'Home', icon: 'home' },    { key: 'profile', title: 'Profile', icon: 'account' },    { key: 'settings', title: 'Settings', icon: 'settings' },  ]);  // Render scene based on selected tab  const renderScene = BottomNavigation.SceneMap({    home: HomeStackScreen, // Home Stack for Home tab    profile: ProfileStackScreen, // Profile Stack for Profile tab    settings: SettingsScreen, // Single screen for Settings tab  });  return (    // Wrap everything in a single NavigationContainer<NavigationContainer><BottomNavigation        navigationState={{ index, routes }}        onIndexChange={setIndex}        renderScene={renderScene}      /></NavigationContainer>  );}