Смена текста при наведении React (onMouseEnter)

Имею компонент, который берет данные из объекта и выводит их. У каждого элемента внизу выводится дефолтный текст. При наведении на каждый элемент должно выводится значение ключа subscrible из массива вместо дефолтного текста.

Проблема: при наведении на 1 элемент - текст меняется у всех карточек (у каждой на свой)

Как нужно: при наведении на 1 элемент - текст меняется только у той карточки, на которую навели. Не могу понять в чем дело, подскажите плз!

const FoodList = () => {
  const data = [
    {
      "id": 1,
      "weight": "0,5",
      "subscrible": "Печень утки или гуся"
    },
    {
      "id": 2,
      "weight": "2",
      "subscrible": "Свежайшая сёмгушка."
    },
    {
      "id": 3,
      "weight": "1",
      "subscrible": "Влажные корма с курицей"
    }
  ]
  


  let description = <p>Чего сидишь? <a href="#">купи.</a></p>;
  const [text, setText] = useState(description);

  return (
    <>
      <div className="cat_food__container">
        <div className="container">
          <div className={s.foodList}>
            {data?.map((food, item) => (
              <div className={s.card__wrapp}
                key={food.id}  {...item}
                onMouseEnter={() => setText(food.subscrible)}
                onMouseLeave={() => setText(description)}
              >
                <FoodItem
                  text={text}
                  setText={setText}
                  food={food}
                  item={item}
                  description={description} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

export default FoodList;