react native gesture handler how to make overlay

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..................................................................................................................................................................................