unable to create multiple menu

[ghost]

I am trying to create a scroll view with multiple cards and want to open pop menu when user click any card's dot but when i click on one card's dot it just opens all the popup menus.

import React, { useState } from 'react';

import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { Menu, MenuItem} from 'react-native-material-menu';
import Icon from 'react-native-vector-icons/Entypo'

const items = [
  {id:'abc',title:"card 1"},
  {id:'abd',title:"card 2"},
  {id:'abe',title:"card 3"},
  {id:'abf',title:"card 4"},
  {id:'abg',title:"card 5"},
  {id:'abh',title:"card 6"},
  {id:'abi',title:"card 7"},
  {id:'abj',title:"card 8"},
  {id:'abk',title:"card 9"}
]

const Item = (id,title,hideMenu,visible,showMenu) => {
  return (<View style={styles.card} key={id+'vv'}><Text style={styles.text}>{title}</Text><Menu
        visible={visible}
        anchor={<Icon size={22} name="dots-three-vertical" color='black' onPress={showMenu} key={id+'zz'}/>}
        onRequestClose={hideMenu}
        style={{width:150}}
        key={id+'cc'}><MenuItem onPress={()=>{alert('hello')}} textStyle={{color:"red"}}key={id+'zz'}>Delete</MenuItem>
      </Menu></View>)
}

export default function App() {
  const [visible, setVisible] = useState(false);

  const hideMenu = () => setVisible(false);

  const showMenu = () => setVisible(true);

  const [xitems,setxitems] = useState(items);

  return (
    <ScrollView style={{ height: '100%', backgroundColor:"white"}}>
      {/*  */}
      {xitems.map((item)=>{return Item(item.id,item.title,hideMenu,visible,showMenu)})}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  card : {
    backgroundColor:"#e8e8e8",
    margin:10,
    padding:30,
    flexDirection:'row',
    alignItems:'center'
  },
  text : {
    color:"black",
    textAlign:'left',
    fontSize:20,
    width:'98%'
  }
})

when i click on one card's dot all the menu pops up