React Native: Issue with Navigation – Screen Transition Not Working (New Problem)

I’m currently working on a React Native project and facing a unique issue with screen navigation. Despite setting up the navigation stack correctly, the screen transition is not working 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 a seemingly correct setup, pressing “Go to Details Screen” doesn’t navigate to the DetailsScreen. No error messages are displayed, and I’ve verified that the screen names match.

Can someone please provide guidance on how to troubleshoot and resolve this new issue with the screen transition not working as expected in React Native navigation? Any insights or suggestions would be appreciated. Thank you!