FlashList child component render behaviour

Question

I have a FlashList that takes a custom popup as a child component as seen in the picture below, the problem now is on first click, the popup is above the content of the FlashList card item as seen in picture one.

The problem now is that on subsequent clicks the modal is below the content of FlashList card item.

Below is the code for the card

const PlanDrugCard: React.FunctionComponent<Props> = ({
  drug,
  noOfTablets,
  backgroundColor,
  textColor,
  id,
  onModalOpen,
  onEditPress,
  onSharePress,
  onDeletePress,
  onModalClose,
  modalVisible,
  startDate,
  endDate,
  dosage,
  item,
  status,
  statusBackgroundColor,
  statusTextColor,
  // setModalVisible,
}) => {
  const Popup = () => {
    return (
      <View style={styles.modalView}>
        <View style={styles.cancelContainer}>
          <TouchableOpacity onPress={onModalClose}>
            <MaterialCommunityIcons name="close" size={20} />
          </TouchableOpacity>
        </View>

        {onEditPress && (
          <TouchableOpacity style={styles.textPress} onPress={onEditPress}>
            <Text style={styles.titleText}>Edit</Text>
          </TouchableOpacity>
        )}

        <View style={styles.divider} />

        {onSharePress && (
          <TouchableOpacity style={styles.textPress} onPress={onSharePress}>
            <Text style={styles.titleText}>Share</Text>
          </TouchableOpacity>
        )}

        <View style={styles.divider} />

        {onDeletePress && (
          <TouchableOpacity style={styles.textPress} onPress={onDeletePress}>
            <Text style={[styles.titleText, { color: "#DD2E44" }]}>Delete</Text>
          </TouchableOpacity>
        )}
      </View>
    );
  };

  const MemoizedPopup = memo(Popup);

  return (
    <VStack style={styles.container}>
      {modalVisible[id] && <MemoizedPopup />}
      <HStack
        justifyContent={"space-between"}
        alignItems={"center"}
        style={{ width: "100%" }}
      >
        <Text
          style={{
            fontSize: 16,
            color: COLORS.primary,
            textAlign: "left",
            fontWeight: "500",
          }}
        >
          {drug}
        </Text>

        <TouchableOpacity onPress={onModalOpen}>
          <MaterialCommunityIcons name="dots-vertical" size={24} />
        </TouchableOpacity>
      </HStack>

      <HStack
        style={{ marginTop: 10 }}
        justifyContent={"space-between"}
        paddingRight={2.5}
      >
        <View
          style={[styles.coloredText, { backgroundColor: backgroundColor }]}
        >
          <Text style={{ color: textColor, fontSize: 13, fontWeight: "600" }}>
            {dosage} {dosage === "1" ? "tablet" : "tablets"}{" "}
            {noOfTablets === 1 ? "" : noOfTablets}{" "}
            {noOfTablets === 1 ? "Once" : "Times"} Daily
          </Text>
        </View>

        <View
          style={[
            styles.coloredText,
            { backgroundColor: statusBackgroundColor },
          ]}
        >
          <Text
            style={{
              color: statusTextColor,
              fontSize: 13,
              fontWeight: "600",
              textTransform: "capitalize",
            }}
          >
            {status}
          </Text>
        </View>
      </HStack>

      {/* <HStack style={{ marginTop: 10, marginRight: 12 }} justifyContent={'space-between'}>
                <Text style={{ color: COLORS.gray3, fontSize: 14, fontWeight: "500" }}>Start: {startDate}</Text>
                <Text style={{ color: COLORS.gray3, fontSize: 14, fontWeight: "500" }}>End: {endDate}</Text>
            </HStack> */}
    </VStack>
  );
}; 

This is the FlashList implementation;

interface ModalVisibilityState {
  [id: string]: boolean;
}

const [modalVisible, setModalVisible] = useState<ModalVisibilityState>({});

const handleModalOpen = (id: string) => {
  setModalVisible((prev) => {
    const updatedModals = { ...prev };

    // Check if the current modal is already open
    if (updatedModals[id]) {
      // If it's open, close it
      updatedModals[id] = false;
    } else {
      // If it's not open, close any other open modals
      Object.keys(updatedModals).forEach((modalId) => {
        if (modalId !== id) {
          updatedModals[modalId] = false;
        }
      });

      // Open the modal with the specified id
      updatedModals[id] = true;
    }

    console.log("Modal opened for:", id);
    return updatedModals;
  });
};

const handleModalClose = (id: string) => {
  setModalVisible((prev) => ({ ...prev, [id]: false }));
  // console.log('Closing Modal for:', id);
};

<FlashList
  data={filteredData}
  keyExtractor={(item) => item._id}
  showsVerticalScrollIndicator={false}
  contentContainerStyle={{ padding: 20 }}
  refreshControl={
    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
  }
  ListHeaderComponent={() => (
    <Text
      style={{
        fontSize: 14,
        fontWeight: "600",
        color: "#2a2a2a",
        textAlign: "left",
        marginBottom: 20,
      }}
    >
      All Medications
    </Text>
  )}
  renderItem={({ item, index }: { item: DrugData; index: number }) => (
    <PlanDrugCard
      // key={item._id}
      drug={item.name}
      noOfTablets={item.timesDaily}
      startDate={item.fromWhen.toString().split("T")[0]}
      endDate={item.tillWhen.toString().split("T")[0]}
      dosage={item.dosage.split("-")[0]}
      backgroundColor={
        item.timesDaily === 1
          ? "#1C49B429"
          : item.timesDaily === 2
          ? "#F7876429"
          : "#2F8C1829"
      }
      textColor={
        item.timesDaily === 1
          ? "#1C49B4"
          : item.timesDaily === 2
          ? "#F78764CC"
          : "#2F8C18"
      }
      onModalOpen={() => handleModalOpen(item._id)}
      onEditPress={() => handleEdit(item._id)}
      onSharePress={() => handleShare(item._id)}
      onDeletePress={() => handleDelete(item._id)}
      onModalClose={() => handleModalClose(item._id)}
      modalVisible={modalVisible}
      id={item._id}
      item={item}
      status={item.status}
      statusTextColor={item.status === "active" ? "#2F8C18" : "#DC143C"}
      statusBackgroundColor={
        item.status === "active" ? "#2F8C1829" : "#DC143C29"
      }
      // setModalVisible={setModalVisible}
    />
  )}
  estimatedItemSize={20}
  extraData={modalVisible}
  onLoad={onLoadListener}
  // disableAutoLayout={true}
/>;

I have tried increasing the zIndex of the popup to the highest but same result. I'd appreciate if anyone can help with this issue.