In bottom half modal, transparent background also sliding along with modal in animationType = "slide" (React Native) - react-native

Question

I implemented a bottom half modal view in react native, which is sliding in from the bottom . I set the background of the modal view to transparent so the previous view is still visible, but the modal view is in focus. This is working fine and once it is open it also looks how I want it to look. My problem is, that the transparent background is also sliding in from the background and this does not look like a native implementation at all. What I want to achieve is, that the transparent background just appears while the modal view slides in from the bottom. Any idea on how to solve this?
Note: Iam using Modal from inbuilt react native, hence not using any npm module or package.
My code:
import { View, Text, Modal } from 'react-native';
function DurationModal(props) {
<View>
<Modal
visible={props.isVisible}
transparent
animationType='slide'
statusBarTranslucent
>
<View>
<View style={{ backgroundColor: 'rgba(0,0,0,0.1)', height: hp('60%') }}></View>
<View style={{ backgroundColor: Colors.whiteBackgroundColor, height: hp('40%') }}>
<Text>Hello</Text>
</View>
</View>
</Modal>
</View>
);
}