Modal : Access violation while ensuring modal created

[iamAbhi-916]

Problem Description

The access violation likely happens specifically after creating the ReactNativeIsland, while finding the parent island.

Steps To Reproduce

1>
Use this sample code in palyground/Sample

/**
 * Copyright (c) Microsoft Corporation.
 * Licensed under the MIT License.
 * @format
 */

import React, {useState} from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Button,
  Text,
  Pressable,
} from 'react-native';
import {Modal} from 'react-native-windows';

export default function Bootstrap() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button
        title="Show Modal"
        onPress={() => setModalVisible(true)}
        color="#007AFF"
      />

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        //title="RNW Modal"
        onRequestClose={() => setModalVisible(false)}>
        <View style={styles.modalOverlay}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>
              This is a modal in React Native Windows!
            </Text>
            <Pressable
              style={styles.button}
              onPress={() => setModalVisible(false)}>
              <Text style={styles.buttonText}>Close Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f3f3f3',
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  modalText: {
    fontSize: 18,
    marginBottom: 15,
    textAlign: 'center',
  },
  button: {
    backgroundColor: '#007AFF',
    borderRadius: 8,
    paddingVertical: 10,
    paddingHorizontal: 20,
  },
  buttonText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 16,
  },
});

AppRegistry.registerComponent('Bootstrap', () => Bootstrap);

2> run the respective playground app

3> Press show modal

Expected Results

Exception thrown at 0x00007FFCF6C7933A in Playground-composition.exe: Microsoft C++ exception: winrt::hresult_error at memory location 0x000000D693CFD440.

CLI version

npx @react-native-community/cli -v

Environment

npx @react-native-community/cli info

Community Modules

No response

Target Platform Version

None

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository