Why my modal does not show up in react native iOS. But its working in react native android

I am in the strange situation. I always develop my app using android simulator. Since running two simulators both iOS and android always turn my pc into oven.

I am using redux in this app.

I got a component called cart. Whenever user tried to access this component I am testing if the user got item added to the cart or not. I am using useEffect hook to test it.

My cart component look like this

//Fetch cart data
let cartList = useSelector((state) => state.productReducer.cartList);

    useEffect(() => {
        if (cartList?.OrderDTO?.Id === null) {
            setModalVisible(true);
            //alert("your Cart is empty")
        }
    }, []);

    useEffect(() => {
        if (cartList?.OrderDTO?.Id === null) {
            setModalVisible(true);
            //alert("your Cart is empty")
        }
    }, [cartList]);

return (
    <ScrollView style={styles.pageContainer}>
        <Loader loading={loading} />
        <View>
            <NotiDialog
                modalVisible={modalVisible}
                setVisible={setModalVisible}
                contentText="Your cart is empty"
                comfirmText="OK"
                comfirm={() => handleEmptyCart()}
                titleText="Notification"
            />
            <ComfirmDialog
                modalVisible={modalTwoVisible}
                setVisible={setModalTwoVisible}
                contentText="Are you sure you want to empty the cart? "
                comfirmText="OK"
                comfirm={() => emptyTheCart()}
                titleText="Notification"
            />
        </View>

I already fetch cartData once when the app is loaded As you can see in the useEffect I am using setModalVisible(true) to show up the modal. But the problem is that this modal popup in android always. I already tried about 100 times. But in iOS its never show up

So instead of modal I tried to open up the ***commented*** alert in iOS. The message your Cart is empty popup. But the modal doesn't. So is there something wrong with my modal?

Here is my modal component

import {
    ...,
    Modal,
} from 'react-native';

const NotiDialog = ({
    modalVisible,
    setVisible,
    comfirm,
    comfirmText,
    contentText,
    titleText,
}) => {
    const confirmFunc = () => {
        comfirm();
        setVisible(false);
    };

    return (
        <View style={styles.centeredView}>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    setModalVisible(!modalVisible);
                }}>
                <View style={styles.centeredView}>
                    ...
                </View>
            </Modal>
        </View>
    );
};