Изменить цвет, когда onClick() с React

У меня вот такие пуговицы любви на картинках:

Проблема в том, что когда я нажимаю только на один плейлист, чтобы все понравились, он становится красным, что, очевидно, не то, что мне нужно. Это то, что я получаю сейчас:

Я фильтрую с помощью idMedia, это функция changeColor:

  onChangeColor = (e) => {

        this.props.addFavorisAction(e.target.id)
        this.setState({
            backgroundColor: !this.state.backgroundColor
        })
  }

а это возврат. Любая помощь будет оценена по достоинству.

const Hit = ({ hit, onToggleList, onChangeColor, displayAudioPlayer, onToggleMP3Read, backgroundColor }) => {
    return (
    <div className = "cm-recherche-item-container">
        <div className = "cm-recherche-item-block1">
            <div className = "cm-recherche-item-avatar-container">
                <img
                    className = "cm-recherche-item-avatar"
                    alt = ""
                    src = {hit.comedienPhoto}
                />
            </div>
            <div className = "cm-recherche-item-title-container">
                <div className = "cm-recherche-item-name">
                    {hit.comedienNomComplet}
                </div>
                <div className = "cm-recherche-item-title">
                    {hit.mediaIntitule.length > 60 ? (
                        hit.mediaIntitule.substr(0, 60) + '...'
                    ) : (
                            hit.mediaIntitule
                        )}
                </div>
            </div>
            <div className = "cm-recherche-item-actions-container">
                <div className = "cm-recherche-item-actions">
                    <div className = "cm-recherche-item-action">
                        <i className = "icon icon-forward-o"></i>
                    </div>
                    <div className = "cm-recherche-item-action">
                        <i id = {hit.idMedia} onClick = {onChangeColor} className = {`icon icon-like-o ${backgroundColor ? "gx-text-gris" : "gx-text-red"}`} ></i>
                    </div>
                    <div className = "cm-recherche-item-action">
                        <i id = {hit.idComedien} onClick = {onToggleList} className = "icon icon-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>

        <div className = "cm-recherche-item-block2">
            <div className = "cm-recherche-item-emojis">
                {hit.interpretationsIcons.map((value, index) => {
                    return (
                        <div className = "cm-recherche-item-icon">
                            <div>
                                <Tooltip title = {hit.interpretationsLabels[index]}>
                                    {String.fromCodePoint(value)}
                                </Tooltip>
                            </div>
                        </div>
                    )
                })} 
                {hit.langueIcon !== "" && hit.langueIcon != null &&
                    <Tooltip title = {hit.langueLabel}>
                        <div className = "cm-recherche-item-icon">
                            <i class = {`flag flag-24 gx-mr-2 ${hit.langueIcon} cm-recherce-lang-icon`}></i>
                        </div>
                    </Tooltip>
                }
                {hit.typeIcon !== "" && hit.typeIcon != null &&
                    <div className = "cm-recherche-item-icon">
                        <div>
                            <Tooltip title = {hit.typeLabel}>
                                {String.fromCodePoint(hit.typeIcon)}
                            </Tooltip>
                        </div>
                    </div>
                }
            </div>
            <div className = "cm-recherche-item-tags">

                <div style = {tagStyle}>
                    <i className = "icon icon-tag cm-recherche-icon-tag"></i>
                </div>

                {hit.interpretationsLabels.map((value, index) => {
                    return (
                        <div style = {tagStyle}>
                            <div class = "cm-recherche-tag">{value}</div>
                        </div>
                    )
                })}
            </div>
        </div>
        <div className = "cm-recherche-item-first" style = {{ display: "none" }}>
            <div className = "cm-recherche-item-infos-container">
                <div className = "cm-recherche-item-emojis-container"> 
                </div>  
            </div>   
        </div>   
        <div className = "cm-recherche-item-second"> 
        </div>
    </div>
)
}