React Native windows simple stack navigation screen transition not working

Question

I want to create a simple React App with stack navigation between two screens 'Home' and 'Profile'. Each Screen has a button which navigates the app to the other screen.

App.tsx

import React from 'react'
import { SafeAreaView } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import HomeScreen from './components/HomeScreen'
import ProfileScreen from './components/ProfileScreen'
import RootStackParamList from './routes'
import { createNativeStackNavigator } from '@react-navigation/native-stack'


const RootStack = createNativeStackNavigator<RootStackParamList>()

function App() {
  return (
    <SafeAreaView style={{flex:1}}>
    <NavigationContainer>
      <RootStack.Navigator initialRouteName='Home'>
        <RootStack.Screen name='Home'component={HomeScreen} options={{title:'Home'}}/>
        <RootStack.Screen name='Profile' component={ProfileScreen} options={{title:'Profile'}}/>
      </RootStack.Navigator>
    </NavigationContainer>
    </SafeAreaView>
  );
}

export default App;

HomeScreen.tsx

import React from 'react'
import { Text, View,Button } from 'react-native'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import RootStackParamList from '../routes'

type HomeScreenProps = NativeStackScreenProps<RootStackParamList,'Home'>


const HomeScreen = ({navigation}:HomeScreenProps) => {
  return (
    <View style={{margin:10,backgroundColor:"yellow",flex:1,justifyContent:"center"}}>
        <Text style={{color:"blue",fontSize:20,textAlign:"center"}}>Home!</Text>   
        <Button title='Go To Profile' 
        color="#841584"
        onPress={()=>navigation.navigate("Profile")}/>
    </View>
  )
}

export default HomeScreen;

ProfileScreen.tsx

import { NativeStackScreenProps } from '@react-navigation/native-stack'
import React from 'react'
import {View,Text,Button} from "react-native"
import RootStackParamList from '../routes'

type ProfileScreenProps = NativeStackScreenProps<RootStackParamList,'Profile'>


const ProfileScreen = ({navigation}:ProfileScreenProps) => {
  return (
    <View style={{margin:10,backgroundColor:"red",flex:1,justifyContent:"center"}}>
        <Text style={{color:"white",fontSize:20,textAlign:"center"}}>
            Profile!
        </Text>
        <Button title='Go To Home' 
        color="#841584"
        onPress={()=>navigation.navigate("Home")}/>
        <Button title='Go Back' 
        color="#841584"
        onPress={()=>navigation.goBack()}/>
    </View>
  )
}

export default ProfileScreen;

dependencies

    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "react": "18.2.0",
    "react-native": "0.71.0",
    "react-native-gesture-handler": "^2.10.1",
    "react-native-reanimated": "^3.1.0",
    "react-native-safe-area-context": "^4.5.3",
    "react-native-screens": "^3.20.0",
    "react-native-windows": "0.71.13",
    "react-navigation-stack": "^2.10.4"

When the app starts with the Home Screen component and I click on 'Go To Profile' button, it moves to the Profile Screen. But in Profile Screen, clicking on either of the buttons (i.e., Go To Home or Go Back) renders blank screen with no error. I have followed the https://reactnavigation.org/docs/getting-started/ documentation and still I have no idea on how to fix this