Обработка клика по элементу массива

Подскажите, пожалуйста, как добавлять/удалять класс при клике кнопку?

Дан массив объектов, при клике на кнопку к элементу должен добавляться класс active, при повторном клике этот класс должен убираться.
Пробовал через useState, но так класс добавляется ко всем элементам.

Также пробовал через ref, но почему то через classList.add('active') не происходит добавление ?‍♂️

Код:

import React from 'react'

function Card({ items }) {

  const onSelectItem = (item) => {
    ...?
  }

  return items.map((e, i) => {
    return (
      <div key={`${e.id + i}_${i}`} className="card">
          <div className="card__controls">
            <div
              className="card__fav button button--shadow"
              onClick={() => onSelectItem(e)}>
              <svg>...</svg>
            </div>
          </div>
      </div>
    )
  })
}

export default Card

import React from 'react'

function Card({ items, setItems }) {

 // вместо индекса лучше использовать уникальный ключ каждого элемента, если есть
  const onSelectItem = (item, index) => {
    setItems(items.map((v, idx)=>index===idx ? {...v, isActive: true} : v ))
  }

  return items.map((e, i) => {
    return (
      <div key={`${e.id + i}_${i}`} className="card">
          <div className="card__controls">
            <div
              className=`card__fav button button--shadow ${e.isActive ? 'active' : ''}`
              onClick={() => onSelectItem(e, i)}>
              <svg>...</svg>
            </div>
          </div>
      </div>
    )
  })
}

export default Card