react native gesture handler how to make overlay - react-native

Question

I want to make a bottom sheet, but I dont know why my overlay not working with a opacity background.
App.tsx
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet from './components/BottomSheet';
export default function App() {
return (
<GestureHandlerRootView style={s.container}>
<Text>Hello</Text>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', opacity: 0.8, backgroundColor: 'rgba(0,0,0,0.9)', zIndex: 10}}>
<BottomSheet />
</View>
</GestureHandlerRootView>
)
}
const s = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center'
}
});
BottomSheet.tsx
import { Dimensions, StyleSheet, Text, View } from 'react-native'
import React, { useEffect } from 'react'
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
const { height } = Dimensions.get('screen');
const START_HEIGHT = height / 3;
const BottomSheet = () => {
const translateY = useSharedValue(0);
const context = useSharedValue(0);
const panGesture = Gesture.Pan()
.onStart(() => {
context.value = translateY.value;
})
.onUpdate((e) => {
translateY.value = e.translationY + context.value;
translateY.value = Math.max(translateY.value, -height / 3);
})
.onEnd(() => {
if(translateY.value >= -height / 4) {
translateY.value = withTiming(0, { duration: 100 });
} else {
translateY.value = withSpring(-height / 3, { damping: 50 })
}
});
useEffect(() => {
translateY.value = -height / 3
}, []);
const rBottomSheet = useAnimatedStyle(() => {
return {
transform: [{ translateY: translateY.value }]
}
});
return (
<GestureDetector gesture={panGesture}>
<Animated.View style={[s.bottomSheet, rBottomSheet]}>
<View style={s.line} />
</Animated.View>
</GestureDetector>
)
}
export default BottomSheet
const s = StyleSheet.create({
bottomSheet: {
backgroundColor: '#fff',
height: height,
width: '100%',
position: 'absolute',
top: height,
borderRadius: 25
},
line: {
height: 4,
width: 70,
marginVertical: 15,
backgroundColor: 'grey',
borderRadius: 6,
alignSelf: 'center'
}
})
Image:
What I am doing wrong ? Can anyone help me please
..sa..................................................................................................................................................................................