onKeyDownListener not being called when a Modal is being shown about react-native-keyevent HOT 1 OPEN

import React, { useEffect, useState } from 'react';
import { ModalProps, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS } from 'react-native-reanimated';

const FakeModal: React.FC<ModalProps> = ({ visible, animationType, children }) => {
  const opacity = useSharedValue(0);
  const [viewable, setViewable] = useState(false);
  const setViewableFalse = () => setViewable(false);

  useEffect(() => {
    if (visible) {
      setViewable(true);
      opacity.value = withTiming(1, {
        duration: animationType === 'fade' ? 200 : 0,
        easing: Easing.linear,
      });
    } else {
      opacity.value = withTiming(0, { duration: animationType === 'fade' ? 200 : 0 }, finished => {
        if (finished) {
          runOnJS(setViewableFalse)();
        }
      });
    }
  }, [visible]);

  const animatedStyles = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
    };
  });

  return viewable ? <Animated.View style={[styles.modal, animatedStyles]}>{children}</Animated.View> : <></>;
};

const styles = StyleSheet.create({
  modal: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 100,
  },
});

export default FakeModal;