Warning: Each child in a list should have a unique "key" prop. Check the top-level render call using <ul>

Не могу понять где ошибка. Консоль выдает 2 сообщения:

1. Warning: Each child in a list should have a unique "key" prop.
2. Uncaught TypeError: Cannot read properties of undefined (reading '_id')

Main.jsx

<ul className="elements__list-template">
  {cards.map(data => { return (
  <Card
    key={data._id}
    card={data}
    onDelete={onDelete}
    onCardClick={onCardClick}
    onCardLike={onCardLike}
  />
  ) })}
</ul>

Card.jsx const currentUser = useContext(CurrentUserContext) return (

<li className="template__list" key={card._id}>
  <article className="element">
    {currentUser._id === card.owner._id && <button className="element__trash"
    type="button" onClick={() => { onDelete(card._id) }} />} <img
    className="element__mask-group" src={card.link} onClick={() => onCardClick({
    link: card.link, name: card.name })} />
    <div className="element__group-title-and-like">
      <h2 className="element__title">{card.name}</h2>
      <ButtonLike
        myid="{currentUser._id}"
        card="{card}"
        onCardLike="{onCardLike}"
      />
    </div>
  </article>
</li>
);

App.jsx

const handleCardLike = useCallback((card) => {const isLike = card.likes.some(element => currentUser._id === element._id)
    if (isLike) {
      api.deleteLike(card._id)
        .then(res => {
          setCards(cards => cards.map((item) => item._id === card._id ? res : item))
        })
        .catch((error) => console.error(`ERROR ТУТ ошибка handleCardLikeREACT-delete ${error}`))
    } else {
      api.addLike(card._id)
        .then(res => {
          setCards(cards => cards.map((item) => item._id === card._id ? res : item))
        })
        .catch((error) => console.error(`ERROR ТУТ ошибка handleCardLikeREACT-add ${error}`))
    }
  }, [currentUser._id])