Button handler function stuck in Modal responding to user click

Question

In my react native 0.64 app, Modal is used to handle an user input on Android. An useEffect hook is executed and check the availability of a few parameters. If a key is missing, then a modal will be activated and take input from user, or generate the key for the user. The routing is done with React Navigation 5.x. The problem is that after user click to generate a new key, the code stuck and never end or complete. I suspect the component is unmounted and causes hang. But I could not find the reason why the code stuck. Here is the code:

import Modal from "react-native-modal";
const [modalVisible, setModalVisible] = useState(false);
const [privateKey, setPrivateKey] = useState("");

const clickModalButton = async () => {  //handle the user click on Modal 
    var navOn = false;
    var _wallet;
    if (privateKey && helper.isHex(privateKey) && privateKey.length == 66) {  //64 hex/32 bytes, + 0x
//do something
    } else if (!privateKey) {  //when no user input, then key is generated
      console.log("generate new private key");  //<<==this console output show. But nothing after that. Suspected that the component is unmounted
      //generate new private key
      _wallet = ethers.Wallet.createRandom();  //random entropy created
      console.log("_wallet key ", _wallet.privateKey);
      setPrivateKey(_wallet.privateKey); //<<==Suspect after component unmounted, change state causes hanging of the app
      console.log("likely never be there");  //<<==never show on console output
      _wallet = new ethers.Wallet(_wallet.privateKey, provider);
     //do something simple
   ...}

useEffect(() => {
  //do something
  const fn = async () => {
    if (certain_condition_not_met) {
       setModalVisible(true); //<<==turn on the Modal to take user input
       return;
    }
  }
  fn();
})

return (
    <View style={styles.viewStyles}>
      <Text h1 style={styles.textHeader}>App</Text>
      <Image 
        source={imageFile}
        style={{ width:200,height:250 }}
      />
      <Spinner
          visible={spinner}
          textContent={message}
          textStyle={styles.spinnerTextStyle}
      />
      <View>
        <Modal  //<<==Modal
            style={{alignItems:"center", alignContent:"center"}}
            animationType="slide"
            transparent={false}
            visible={modalVisible}
            onBackdropPress={() => setModalVisible(false)}
            onRequestClose={() => {
              setModalVisible(!modalVisible);
            }}
          > 
            <View style={styles.centeredView}>
              <View style={styles.modalView}>
                <Text style={{padding:20}}>Input Key</Text>
                <TextInput autoFocus={true} value={privateKey} onChangeText={keyChange} placeholder={keyPlaceholder} style={styles.textTitle} />
                <View style={{padding:20}}>
                  <Button style={styles.button} 
                            onPress={() => clickModalButton()} 
                            title="Save/Generate Key"/>
                </View>              
              </View>
            </View>
          </Modal>
      </View>  
    </View>
  );
}