Framework: React Native with react-native-paper for modal management.

When the close button in the modal is clicked, the modal closes twice instead of once. This behavior is unexpected and disrupts the user experience.

Expected Behavior:
The modal should close smoothly and only once when the close button is clicked.

here is my code

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Modal, Portal } from 'react-native-paper';
import PrimaryButton from './PrimaryButton';
import { CircleLockIcon, CloseButton } from './custom_icons';
import { COLORS, SIZES, FONTS } from '../constants';
import CenteredLoader from './CenteredLoader';
import ErrorIconNew from './custom_icons/ErrorIconNew';

type Props = {
  isModalVisible: boolean;
  setModalVisible: any;
  modalText?: string;
  primaryBtnTitle: string;
  secondaryBtnTitle: string;
  showCircleLockIcon?: boolean;
  loader?: boolean;
  isPaymentModal?: boolean;
  paymentModalText?: any;
  onAction?: any;
  onSecondaryAction: any;
  icon?: any;
  disabled?: boolean;
  styledText?: any;
  isSecondaryButtonDisabled?: boolean;
  closeButton?: boolean;
  isLockIcon?: boolean;
  errorIcon?: any;
};

function ModalComponent({
  isModalVisible = false,
  setModalVisible,
  modalText,
  paymentModalText = null,
  primaryBtnTitle = 'सदस्यता खरीदें',
  secondaryBtnTitle = 'रहने दें',
  showCircleLockIcon = false,
  loader = false,
  isPaymentModal = false,
  onAction,
  icon = null,
  disabled = false,
  styledText = false,
  isSecondaryButtonDisabled = false,
  closeButton = false,
  onSecondaryAction,
  isLockIcon = false,
  errorIcon = false,
}: Props) {
  const renderIcon = () => {
    if (errorIcon) {
      return (
        <View style={styles.errorIcon}>
          <ErrorIconNew />
        </View>
      );
    }

    if (showCircleLockIcon) {
      return (
        <View style={styles.lockIcon}>
          <CircleLockIcon />
        </View>
      );
    }

    return icon;
  };

  const renderModalText = () => {
    if (isPaymentModal) {
      return <>{paymentModalText()}</>;
    }

    if (styledText) {
      return styledText();
    }

    return <Text style={styles.modalText}>{modalText}</Text>;
  };

  return (
    <Portal>
      <Modal
        visible={isModalVisible}
        onDismiss={() => setModalVisible(false)}
        contentContainerStyle={styles.ModalViewContainer}
        dismissableBackButton={false}
      >
        <CenteredLoader isAnimating={loader} description="" />
        <View style={styles.ModalViewContainer}>
          <View style={styles.modalView}>
            {renderIcon()}
            {renderModalText()}
            {closeButton ? (
              <View style={styles.closeButtonContainer}>
                <CloseButton onPress={() => setModalVisible(false)} />
              </View>
            ) : (
              <>
                {primaryBtnTitle && (
                  <PrimaryButton
                    title={primaryBtnTitle}
                    onPress={onAction}
                    customStyle={styles.paidButton}
                    disabled={disabled}
                    lockIcon={isLockIcon}
                  />
                )}
                {secondaryBtnTitle && (
                  <PrimaryButton
                    title={secondaryBtnTitle}
                    onPress={onSecondaryAction}
                    customStyle={styles.rejectButton}
                    customTextColor={styles.btnTextColor}
                    disabled={isSecondaryButtonDisabled}
                  />
                )}
              </>
            )}
          </View>
        </View>
      </Modal>
    </Portal>
  );
}