JS - Реагировать: добавление / удаление из избранного

Question

Я новичок в реакции, и в настоящее время я пытаюсь внедрить «систему добавления / удаления» в список избранного. Я хотел бы, чтобы моя кнопка, которая находится внутри «карты», отображалась желтым цветом, когда соответствующий элемент уже находится в списке избранных, или серым цветом, когда его нет в списке избранных. Мой код выглядит следующим образом:

favoriteList is an array
...
elements.map(
      element =>
        !element.isOpen && (
          <div className="col-xl-12 col-lg-12" key={element.id}>
            {element.questions
              .slice(currentPage - 1, currentPage)
              .map((question, i) => (
                <div className="card shadow mb-4" key={question.id}>
                  <div className="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 className="m-0 font-weight-bold text-primary">
                      Question N° {currentPage} of {element.questions.length}
                    </h6>
                    <a
                      onClick={() => saveOrDeleteFavorite(element.id)}
                      title="Add to favorite"
                       //(1)
                      <i className="fas fa-star fa-sm fa-fw fa-2x"></i>
                    > .........

Так что в (1) я хотел бы установить другой цвет для значка звезды, относительно того, есть ли «элемент» уже в «FavoritesList» или нет. Также информация «уже присутствует» будет полезна для функции saveOrDeleteFavorite (element.id), которую я вызываю по нажатию на звездочку.

Надеюсь, что все было понятно, и заранее благодарю вас за вас помощь.