Javascript – Change the button color if the IDs in the compared arrays match (React JS Redux TypeScript AntD)

Problem:

The component displays the result of a GIF search. To add to favorites I use redux.
I would change the color of the icon if it is added to favorites. How can I compare array ids result and favorites?

import React, {FC, useState} from 'react';
import {IFavoriteGif, IFavoriteGifs, ISearchGifs} from "../../types/types";
import {useDispatch, useSelector} from "react-redux";
import { Col, Row} from 'antd';
import {HeartTwoTone} from '@ant-design/icons';

interface IGifsResultProps {
    results: ISearchGifs[];
}

const GifsResult: FC<IGifsResultProps> = ({results}) => {

    const dispatch = useDispatch();
    const favorites = useSelector((state: IFavoriteGifs) => state.favorites);

    const addFavorites = (id: string, src: string) => {
        const data = {
            id: id,
            src: src,
        }
        dispatch({type: "ADD_FAVORITE_GIFS", payload: data})
    }

    return (
        <Row>
            {results.map((result, i) =>
                <Col span={8} key={result.id}>
                    {//if ids matches
                            ? <HeartTwoTone twoToneColor="red"/>
                            : <HeartTwoTone twoToneColor="gray"/>
                    }
                    <img
                        src={result.images.fixed_height.url}
                        onClick={()=> addFavorites(result.id, result.images.fixed_height.url)}
                    />
                </Col>
            )}
        </Row>
    );
};

export default GifsResult;

Solution:

Like this:

<HeartTwoTone twoToneColor={favorites.some(f => f.id === result.id) ? 'red' : 'grey'}/>