I have an app where I'm fetching data from an API and render it into cards. There are two pages, `Home` where the cards are rendered and `Favorites` where the cards that have been marked as favorites are rendered (each card has a heart icon that indicates whether it's favorite or not). There is an array where all the cards marked as favorites are being pushed, and I'm pushing this array into `localStorage` with this `useEffect`:

```
 useEffect(() => {
    localStorage.setItem('my-beer-list', JSON.stringify(favoriteBeers));
  });

```

The problem is that upon refresh, the `Favorites` page has kept the cards that were marked as such, but their corresponding cards at `Home` are not marked as favorite any more, and can be selected again resulting in duplicate cards in the other page.

The following function where checks if the card is "favorited" and then passed as prop to both the card and its corresponding modal

```
const isFavorite = (beer, favoriteBeers) => {
    return favoriteBeers.includes(beer);
  }

```

I have a codesandbox with the project [here](https://codesandbox.io/s/runtime-star-unnnp?file=/src/App.js), in case you want to check it a bit more
---------------------------------------------------------------------------------------------------------------------------------------------------