Repository: react-native
Issue: When Modal Component renders then AppState blur event listener calls in Android
Labels: Component: Modal,API: AppState,Needs: Attention

### Description

When Modal/Alert component renders in our React Native App the App State goes blur

### React Native Version

0.71.6

### Output of `npx react-native info`

info Fetching system and libraries information...
System:
    OS: macOS 12.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 81.42 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8512546
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.6 => 0.71.6 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found


### Steps to reproduce

When Modal/Alert component renders in our React Native App the App State goes blur

AppState.addEventListener('blur', callback);

here this callback method is triggering

### Snack, code example, screenshot, or link to a repository

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

`/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

        import React, {useEffect, useState} from 'react';
        import {
          SafeAreaView,
          StatusBar,
          Text,
          useColorScheme,
          Modal,
          TouchableOpacity,
          AppState,
          View,
        } from 'react-native';
        
        import {Colors} from 'react-native/Libraries/NewAppScreen';
        
        function App(): JSX.Element {
          const isDarkMode = useColorScheme() === 'dark';
          const [isVisible, setVisible] = useState(false);
        
          useEffect(() => {
            const blurEventListener = AppState.addEventListener('blur', () => {
              console.log('blur event trigger');
            });
            const focusEventListener = AppState.addEventListener('focus', () => {
              console.log('focus event trigger');
            });
            return () => {
              focusEventListener && focusEventListener.remove();
              blurEventListener && blurEventListener.remove();
            };
          }, []);
        
          const backgroundStyle = {
            backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
            flex: 1,
          };
        
          return (
            <SafeAreaView style={backgroundStyle}>
              <StatusBar
                barStyle={isDarkMode ? 'light-content' : 'dark-content'}
                backgroundColor={backgroundStyle.backgroundColor}
              />
              <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <TouchableOpacity onPress={() => setVisible(!isVisible)}>
                  <Text>Open Modal</Text>
                </TouchableOpacity>
              </View>
        
              <Modal visible={isVisible}>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                  <TouchableOpacity onPress={() => setVisible(!isVisible)}>
                    <Text>Close Modal</Text>
                  </TouchableOpacity>
                </View>
              </Modal>
            </SafeAreaView>
          );
        }
        
        export default App;
`