React Native: Issue with Navigation – Stack Navigator not Navigating to Next Screen

I’m encountering a navigation issue in my React Native project using React Navigation. The Stack Navigator is not navigating to the next screen as expected. Here’s a simplified version of my code:

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// HomeScreen.js
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function HomeScreen() {
  const navigation = useNavigation();

  const handleNavigate = () => {
    navigation.navigate('Details');
  };

  return (
    <View>
      <Text>Welcome to the Home Screen!</Text>
      <TouchableOpacity onPress={handleNavigate}>
        <Text>Go to Details Screen</Text>
      </TouchableOpacity>
    </View>
  );
}

Despite having a simple navigation setup, pressing “Go to Details Screen” does not navigate to the DetailsScreen. There are no error messages, and I’ve verified that the screen names match.

Can someone please provide guidance on how to troubleshoot and resolve this issue with the Stack Navigator not navigating to the next screen? Any insights or suggestions would be appreciated. Thank you!