favorito retornando undefined

Creio que segui todos os passos, porém por algum motivo meu favorito está retornando undefined.

Favoritos.js

import { createContext, useContext, useState } from  'react';

export const FavoritosContext = createContext(null);
FavoritosContext.displayName = "Favoritos";

const FavoritosProvider = ({ children }) => {
    const { favorito, setFavorito } = useState([]);

    return(
        <FavoritosContext.Provider value={{ favorito, setFavorito }} >
            { children }
        </FavoritosContext.Provider>
    )
}

export const useFavoritoContext = () => {
    const { favorito, setFavorito } = useContext(FavoritosContext);
    const adicionarFavorito = (novoFavorito) => {
        console.log(favorito);
        const favoritoRepetido = favorito.some(item => item.id === novoFavorito.id);

        let novaLista = [...favorito];

        if(!favoritoRepetido) {
            novaLista.push(novoFavorito);
            return setFavorito(novaLista);
        }

        novaLista = favorito.filter((fav) => fav.id !== novoFavorito.id);
        return setFavorito(novaLista); 
    }

    return{
        favorito,
        adicionarFavorito
    }
}

export default FavoritosProvider;

routes.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Inicio from './pages/Home';
import Favoritos from './pages/Favoritos';
import Cabecalho from './Components/Cabecalho';
import Rodape from './Components/Rodape';
import FavoritosProvider from './Contextos/favoritos';

const AppRoutes = () => {
    return(
        <BrowserRouter>
            <Cabecalho />
                <FavoritosProvider>
                    <Routes>
                        <Route path="/" element={ <Inicio/> }></Route>
                        <Route path="/favoritos" element={ <Favoritos/> }></Route>
                    </Routes>
                </FavoritosProvider>
            <Rodape />
        </BrowserRouter>
    )
}

export default AppRoutes;

card-

import styles from './Card.module.css';
import iconeFavoritar from './img/favorite.png';
// import iconeDesfavoritar from './img/desfavoritar.png';
import { useFavoritoContext } from '../../Contextos/favoritos.js';

const Card = ({id, titulo, capa}) => {
    const { adicionarFavorito } = useFavoritoContext();
    
    return(
        <div className={styles.container}>
            <img src={capa} alt={titulo} style={{ width: '100%', }} />
            <h2 style={styles.titulo}>{titulo}</h2>
            <img 
                style={{width: '25px',}} 
                src={iconeFavoritar} 
                alt="icone favoritar" 
                onClick={() => {
                    adicionarFavorito({id, titulo, capa});
                }}
            />
        </div>
    )
}

export default Card;