How to make the background of a Modal in React Native as white blurred?

Question

I am using the TransitionPresets.ModalPresentationIOS to launch a Modal screen. I would like to make the top background of the Modal screen to a blurred white colour. I can't use Modal component in React. Hence, using the TransitionPresets.ModalPresentationIOS.

This is what I have now. I would like to hide the background screen. The backgroundColor prop in the screenOptions doesn't have any effect.

Below is the code:

App.js

import * as React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { BlurView, createStackNavigator, TransitionPresets } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './HomeScreen';
import ModalScreen from './ModalScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          ...TransitionPresets.ModalPresentationIOS,
          presentation: 'modal', // Set modal presentation
          backgroundColor: 'transparent', // Set transparent background for all screens (important)
        }}
      >
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Home Screen' }}
        />
        <Stack.Screen
          name="Modal"
          component={ModalScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.jsx

// HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open Modal" onPress={() => navigation.navigate('Modal')} />
    </View>
  );
};

export default HomeScreen;

ModalScreen.jsx

import React from 'react';
import { Text, View, StyleSheet, Button, Modal } from 'react-native';
import { BlurView } from 'expo-blur';

const ModalScreen = ({ navigation }) => {
  return (
    <View style={styles.modalContainer}>
    </View>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1, // Occupy full screen
    backgroundColor: 'white', // Adjust background color as needed
    padding: 20,
    margin: 20,
    borderRadius: 10,
  },
});

export default ModalScreen;

I have tried changing the screenOptions in the stack navigator, tried using BlurView from expo-blur. Nothing seems to work. All I want is to hide the background card and have a blurred white background.