我做了一个按钮类型来打开主页上的模态，模态是来罚款和关闭罚款时，点击覆盖，问题是当我得到一些页面与列表内<Modal />组件和当我回到主页，然后如果我点击该按钮打开它并没有打开第一次点击.我必须点击两次打开它.这里是什么问题？我不明白。
下面是我的代码：

//Home.js
const modalData = [
  { key: "Add Dealer", navigateTo: "AddDealer" },
  { key: "Add Franchise", navigateTo: "AddFranchise" },
  { key: "New Lead", navigateTo: "AddNewLeads" },
];

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

  const renderPopList = ({ item, index }) => {
    const lastItem = index === modalData.length - 1;
    return (
      <TouchableOpacity onPress={() => navigation.navigate(item.navigateTo)}>
        <Text style={[styles.links, lastItem && styles.lastLink]}>
          {item.key}
        </Text>
      </TouchableOpacity>
    );
  };

  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };
  return (
    <>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={toggleModal}
        onTouchStart={toggleModal}
        style={styles.modalWrapper}
      >
        <TouchableWithoutFeedback onPress={toggleModal}>
          <View
            style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.1)" }}
            onPress={toggleModal}
          ></View>
        </TouchableWithoutFeedback>
        <FlatList
          data={modalData}
          renderItem={renderPopList}
          onPress={toggleModal}
          style={[styles.modal]}
        />
      </Modal>
      //Button Here
      <View style={styles.bottomBtnWrap}>
        <TouchableOpacity style={styles.addBtn} onPress={toggleModal}>
          <FontAwesome color="#fff" name="plus" size={30} />
        </TouchableOpacity>
      </View>
    </>
  );
}