I try to change the icon and add it to favorites when I click on it. It works fine, my icon is changed but it impacts all my images icons instead of one. How can I fix this? Here is my code:

```
import React, { useState, useEffect } from "react";

import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
import PlayCircleIcon from '@mui/icons-material/PlayCircle';

const Row = () => {
    const [image, setImage] = useState([])
    const [favorite, setFavorite] = useState(false);

    useEffect(() => {
        ...
    }, []);

    const addToFavorite = () => {
       ...
    }

    return (
                <div >
                    {image.map((item) => {
                        return (
                            <div key={item.id}>
                                <span>{item.title}</span>
                                <span>{item.description}</span>
                                <img src={...} alt={image.title}/>
                                <div onClick={() => setFavorite(!favorite)}>
                                   {favorite ? < CheckCircleOutlineIcon onClick={() => addToFavorite()} /> : < AddCircleOutlineIcon onClick={() => addToFavorite()} />}
                                </div>
                        )
                     })}
                </div>
    );
}

export default Row;

```