React-Native Modal behaving differently in iOS vs Android

Question

In my react-native app the modal opens up only in few screens in iOS but all the necessary screens in Android.

I have a navigator setup the following way

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function SoupNavigator() {
    return (
        <Stack.Navigator >
            <Stack.Screen name = 'marvel' component = {Marvel} />
            <Stack.Screen name = 'dc' component = {DC}
                options  = {{
                    title: null
                }}
            />
            <Stack.Screen name = 'blade' component = {Blade} 
                options  = {{
                    headerShown: false,
                    gestureEnabled: false
                }}
            />
        </Stack.Navigator>
    )
}

Within the Marvel component I am returning a component that has the Modal like below

import { Modal }   from 'react-native';

class MarvelScreen extends React.Component {
    constructor (props) {
        super (props);
        this.state = {
            showModal      : false,
        }
    }

    componentDidUpdate = () => {
        // something has happend so 
        this.props.navigation.navigate ('dc')
        
        //something else has happend 
        this.props.navigation.navigate ('blade')
        
    }

    onModalDismiss = () => {
        this.setState({
            showModal: false,
        });
    }
    
    render () {
        return (
            <SafeAreaView style={Style.container}>
                <Modal              
                    animationType="slide"
                    transparent={true}
                    visible={this.state.showModal}
                    presentationStyle='overFullScreen'
                >
                    <TouchableWithoutFeedback onPressOut={this.onModalDismiss}>
                        <View style={Styles.container}>
                          {['Hello', 'Good day'].map((msg, idx) => {
                                return <Text key={idx} style={Styles.text}>{msg}</Text>
                            })}
                        </View>
                    </TouchableWithoutFeedback>
                </Modal>
                <View>              
                </View>
            </SafeAreaView> 
        )
    }
}

In Android the modal opens up when I'm in the following screens Marvel, DC, Blade.

In iOS it only opens up when I'm in Marvel.

How do i get it to behave in iOS the same way as in Android?