Absolute position element doesn't not respond to touch events on Android

I tried to implement toast view by using absolute position element and found this issue. The element doesn't respond to touch when I put it outside of stack screen but float it on top of stack screen. And the issue doesn't repro when I put the element inside the screen. I put the toast view outside of screen because I would like to share it across multiple screens.
Refer below example. The local toast view responses to touch but global toast view does not.
The issue only repro in Android. It works fine in IOS.

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Platform, Animated, TouchableWithoutFeedback, View, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

function Home() {
  const styles = getStyles();
  const dismissHandler = useCallback((item) => {
    console.log('Toast should dismiss');
  }, []);

  return (
    <View>
      <Toast onPress={dismissHandler} show>
        <Text style={styles.root}>This is local toast</Text>
      </Toast>
      <Text >This is Home screen</Text>
    </View>
  );
}

export default function App() {
  const styles = getStyles();
  const dismissHandler = useCallback((item) => {
    console.log('Toast should dismiss');
  }, []);

  return (
    <NavigationContainer>
      <Toast onPress={dismissHandler} show>
        <Text style={styles.root}>This is global toast</Text>
      </Toast>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export function Toast(props) {
  const {
    show,
    position,
    orientation,
    children,
    duration,
    onPress,
    ...restProps
  } = props;

  const animateTranslate = useRef(new Animated.Value(-10)).current;
  const animateOpacity = useRef(new Animated.Value(0)).current;
  let [showing, setShowing] = useState(false);
  let [hiding, setHiding] = useState(false);
  const styles = getStyles();

  useEffect(
    useCallback(() => {
      if (show) {
        if (!showing) {
          setShowing(true);
          setHiding(false);
          Animated.parallel([
            Animated.timing(
              animateTranslate,
              { 
                toValue: 0,
                duration: duration || 2000,
                useNativeDriver: true
              }
            ),
            Animated.timing(
              animateOpacity,
              { 
                toValue: 1,
                duration: duration || 2000,
                useNativeDriver: true
              }
            )
          ]).start();
        }
      } else {
        if (!hiding) {
          setShowing(false);
          setHiding(true);
          Animated.parallel([
            Animated.timing(
              animateTranslate,
              { 
                toValue: 10,
                duration: duration || 2000,
                useNativeDriver: true
              }
            ),
            Animated.timing(
              animateOpacity,
              { 
                toValue: 0,
                duration: duration || 2000,
                useNativeDriver: true
              }
            )
          ]).start(() => {
            setHiding(false);
            animateTranslate.setValue(-10);
          });
        }
      }
    }, [show])
  );

  if (!showing && !hiding) {
    return null;
  }

  return (
    <Animated.View style = {[
      styles.container,
      {
        top: (position === 'bottom') ? '80%' : 200,
        transform: [orientation === "yAxis" ? {
          translateY: animateTranslate 
        } : {
          translateX: animateTranslate
        }],
        opacity: animateOpacity
      }]}
      pointerEvents={show ? 'auto' : 'none'}
    >
      <TouchableWithoutFeedback style={styles.touchable} onPress={onPress}>
        <View style={styles.root}>
          {children}
        </View>
      </TouchableWithoutFeedback>
    </Animated.View>
  );
}

const getStyles = () => {
  return {
    container: {
      width: '100%',
      zIndex: 9999,
      elevation: 1,
      position: 'absolute',
    },
    touchable: {
      height: '100%',
      width: '100%',
    },
    root: {
      borderRadius: Platform.select({ios: 12, android: 4}),
      marginLeft: Platform.select({ios: 16, android: 8}),
      marginRight: Platform.select({ios: 16, android: 8}),
      marginBottom: Platform.select({ios: 8, android: 6}),
      marginTop: Platform.select({ios: 8, android: 6}),
      color: 'white',
      backgroundColor: 'black',
    },
  };
}

package.json

  "dependencies": {
    "expo": "~38.0.0",
    "react": "~16.12.0",
    "react-dom": "~16.12.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
    "@react-navigation/native": "5.7.4",
    "@react-navigation/stack": "5.9.1",
    "@react-native-community/masked-view": "0.1.10",
    "react-native-gesture-handler": "1.7.0",
    "react-native-screens": "2.11.0",
    "react-native-web": "0.13.13"
  }

Start with the provided App and Home reproduction using the Expo 38.0.0 dependencies in package.json, comparing the global toast outside Stack.Navigator with the local toast inside Home. Trace Android touch handling for the absolute-positioned Animated.View and navigation container; done means the global toast responds to onPress on Android as the local toast already does.