Javascript 删除始终返回数组最后一项的组件

我正在尝试删除一个组件，该组件接收您的id作为我的函数deleteCard（）的参数。此组件封装在数组中，但在触发函数时，它始终删除数组的最后一项。我正在使用贴图渲染我的牌阵列

---

请检查我的GitHub中的代码。我正在使用react模式控制卡的渲染，并从外部文件调用deleteCard函数：

卡片组件：

const Card = ({
    id,
    local,
    countryName,
    countryFlag,
    goalDate,
    openModalDelete,
    openModalEdit
} : countryCardTypes) => {
    return (
            <CardContainer key={id}>
                <TopContainer>
                    <CountryInfoContainer>
                        <ImageFlag src={countryFlag} />
                        <CountryTitle>{countryName}</CountryTitle>
                    </CountryInfoContainer>
                    <ButtonsContainer>
                        <EditButton onClick={openModalEdit}>
                            <MdEdit size={18} color='#333'/>
                        </EditButton>
                        <CloseButton onClick={openModalDelete}>
                            <MdClose size={18} color='#333'/>
                        </CloseButton>
                    </ButtonsContainer>
                </TopContainer>
                <Divider />
                <BottomContainer>
                    <Text>Local: {local}</Text>
                    <Text>Meta: {goalDate}</Text>
                </BottomContainer>
            </CardContainer>
    )
}

export default Card

渲染卡阵列：

  {
          countriesCards?.map(card => (
            <Card
              id={card.id}
              local={card.local}
              goalDate={card.goalDate}
              countryName={card.countryName}
              countryFlag={card.countryFlag}
              openModalEdit={() => { setShowModalEdit(true) }}
              openModalDelete={() => { setShowModalDelete(true) }}
            />
          ))
        }

{
countriesCards？地图（卡片=>(
{setShowModalEdit（true）}
OpenModelDelete={（）=>{setShowModalDelete（true）}
/>
))
}

---

如何处理my deleteCard（）删除触发此函数的当前卡？

请检查my GitHub中的代码。我正在使用react模式控制卡的渲染，并从外部文件调用deleteCard函数：

---

从何处调用此函数-deleteCard？

  {
          countriesCards?.map(card => (
            <Card
              id={card.id}
              local={card.local}
              goalDate={card.goalDate}
              countryName={card.countryName}
              countryFlag={card.countryFlag}
              openModalEdit={() => { setShowModalEdit(true) }}
              openModalDelete={() => { setShowModalDelete(true) }}
            />
          ))
        }