При обновлении страницы состояние кнопки обнуляется React

Есть карточки товаров, в каждой карточки есть кнопка добавления в избранное, когда товар не добавлен в избранное кнопка серая и при нажатии становится красной. Товар добавляется в избранное и из избранного удаляется, но при обновлении страницы состояние кнопки обнуляется и она становится серой, несмотря на то, что в избранном есть карточка. Как решить?

App.jsx :

function App() {
const [items, setItems] = React.useState([]);
const [favorite, setFavorite] = React.useState([]);

React.useEffect(() => {
    async function fetchData() {
        try {
            const [itemsResponse, favoriteResponse] = await Promise.all([
                axios.get('https://path.mockapi.io/items'),
                axios.get('https://path.mockapi.io/favorites'),
            ]);

            setIsLoading(false);

            setFavorite(favoriteResponse.data);
            setItems(itemsResponse.data);
        } catch (error) {
            alert('Error while loading data');
            console.error(error);
        }
    }
    fetchData();
}, []);

const onAddToFavorite = async obj => {
    try {
        if (favorite.find(favObj => Number(favObj.id) === Number(obj.id))) {
            axios.delete(`https://path.mockapi.io/favorites/${obj.id}`);
            setFavorite(prev => prev.filter(item => Number(item.id) !== Number(obj.id)));
        } else {
            const { data } = await axios.post(
                'https://path.mockapi.io/favorites',
                obj,
            );
            setFavorite(prev => [...prev, data]);
        }
    } catch (error) {
        alert('Error while adding to favorite');
        console.error(error);
    }
};                                                                                 
  return (
    <AppContext.Provider value={{ items, favorite, onAddToFavorite }}>
        <Suspense>
            <ScrollToTop />
            <Routes>
                <Route path='/' exact element={
                        <Home
                            items={items}
                            onAddToFavorite={onAddToFavorite}
                        />}/>
                <Route path='/favorite' exact element={<Favorite items={favorite} />} /> 
            </Routes>
        </Suspense>
    </AppContext.Provider>
);}export default App;

Карточка товара CarCard.jsx :

 function CarCard({

        title,
        price,
        imageUrl,
        gearbox,
        fuelTank,
        body,
        capacity,
        onFavorite,
        discount,
        id,
        favorited = false,
        loading = false,
        props,
    }) {
        const [isFavorite, setIsFavorite] = React.useState(favorited);

    const obj = {
        id,
        parentId: id,
        imageUrl,
        title,
        price,
        gearbox,
        fuelTank,
        capacity,
        body,
        discount,
    };

    const onClickFavorite = () => {
        onFavorite(obj);
        setIsFavorite(!isFavorite);
    };

    return (
        <div className={styles.card}>
                <>
                    <h2 className={styles.title}>
                        <Link to={`/${id}`}>
                            <p>{title}</p>
                        </Link>
                        {onFavorite && (
                            <button className={styles.favorite} onClick={onClickFavorite}>
                                <img src={isFavorite ? '/images/like.svg' : '/images/unlike.svg'} alt={isFavorite ? 'Like' : 'Unlike'}/>
                            </button>
                        )}
                    </h2>
                    <Link to={`/${id}`}>
                        <div className={styles.body}>{body}</div>
                        <div className='d-flex aic jcc pos-r'>
                            <img className='mt-50' src={imageUrl} alt='Car' />
                            <div className={styles.blur}></div>
                        </div>
                        <div className='d-flex jcsb aic mt-50'>
                            <div className='d-flex aic jcc tac'>
                                <img
                                    className='mr-6'
                                    width={24}
                                    height={24}
                                    src='./images/gas-station.svg'
                                    alt='FuelTank'
                                />
                                <p className={styles.carDetails}>{fuelTank}L</p>
                            </div>
                            <div className='d-flex aic jcc tac'>
                                <img
                                    className='mr-6'
                                    width={24}
                                    height={24}
                                    src='./images/car.svg'
                                    alt='GearBox'
                                />
                                <p className={styles.carDetails}>{gearbox}</p>
                            </div>
                            <div className='d-flex aic jcc tac'>
                                <img
                                    className='mr-6'
                                    width={24}
                                    height={24}
                                    src='./images/people.svg'
                                    alt='Capacity'
                                />
                                <p className={styles.carDetails}>{capacity} People</p>
                            </div>
                        </div>
                        <div className='d-flex flex-row aic jcsb mt-20'>
                            <div className=''>
                                <div className='d-flex aic'>
                                    <Price price={price} />
                                    <span className='span'>/day</span>
                                </div>
                                {discount && (
                                    <div className='d-flex flex-row aic'>
                                        <div className={styles.discount}>${discount}.00</div>
                                    </div>
                                )}
                            </div>
                            <button className={styles.button}>Rent Now</button>
                        </div>
                    </Link>
                </>
        </div>
    );
}

export default CarCard;

Страница с избранными товарами Favorite.jsx :

const Favorite = () => {
    const { favorite, onAddToFavorite } = React.useContext(AppContext);

    return (
        <>
            <HelmetProvider>
                <Helmet>
                    <title>Favorite Cars</title>
                    <meta name='description' content='Favorite Cars' />
                </Helmet>
                <div className='container'>
                    <div className={styles.favorite}>
                        <h2 className='mt-46'>Favorite Cars</h2>
                        <div className={styles.favoriteCard}>
                            {favorite.length <= 0 ? (
                                <div>You don't have favorite cars, add some..</div>
                            ) : (
                                favorite.map((item, index) => (
                                    <CarCard
                                        key={index}
                                        favorited={true}
                                        onFavorite={onAddToFavorite}
                                        {...item}
                                    />
                                ))
                            )}
                        </div>
                    </div>
                </div>
            </HelmetProvider>
        </>
    );
};

export default Favorite;