Hey guys ,could you please take a look why my menu pops on weird position , React Native

Hey guys ,

I am using the menu function of React Native Paper .
And I had create a component for PopMenu,as follow

import React from 'react';
import { StyleSheet, View } from 'react-native';
import {Button, Menu, Divider, Provider} from 'react-native-paper';
import Icon from './Icon';
import colors from '../config/colors';
function PopMenu({style}) {
    const [visible,setVisible] = React.useState(false);
    const openMenu = () => setVisible(true);
    const closeMenu = () => setVisible(false);
    return (
        
        <Provider>
        <View
        style={{
          style
        }}>
            <Menu
            visible = {visible}
            onDismiss ={closeMenu}
            anchor ={ <Icon  name='chevron-down-circle' iconColor={colors.black} size={30} onPress={openMenu}/>}
            >
                <Menu.Item onPress ={()=>{}} title="Item 1"/>
                <Menu.Item onPress ={()=>{}} title="item2"/>
                <Divider/>
                <Menu.Item onPress={() => {}} title="Item 3" />

            </Menu>
            
        </View>

        </Provider>
        
    );
}

const styles = StyleSheet.create({
  
})
export default PopMenu;

And I had found a problem , I was trying to insert this component into another screen which I need it appear in the most top layer . Therefore , I set its position “absolute” .however ,the menu got started to pop on a weird position ,like the pic below

I have attached my code also ,please take a look ,thank you so much !!

import React from 'react';
import { StyleSheet, View,Button, Image, ImageBackground } from 'react-native'
import PopMenu from '../components/PopMenu';

function TryScreen(props) {
    return (
        <View style ={styles.bg}>
            
         <ImageBackground source ={require('../assets/gift.png')} style={styles.img}>
             <Image source={require("../assets/red_jacket.png")} style={styles.profile_img}/>
         <PopMenu position={styles.pop}/>
         </ImageBackground>
        
        </View>
    );
}

const styles = StyleSheet.create({
    pop:{
      position :"absolute",
      
    },
    bg :{
        flex :1,
        justifyContent :'center',
        alignItems :"center",
         
    },
   img :{
       width : 300,
       height :300,
       justifyContent :'center',
        alignItems :"center"
   },
   profile_img :{
       width : 100,
       height :100,
       borderRadius :50,
   }
})
export default TryScreen;