Problemas: Cannot read properties of undefined

Codigo esta igual ao ensinado porem esta apresentando problema de Cannot read properties of undefined.

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

export const FavoritosContext = createContext(); //Criando context
FavoritosContext.displayName = "Favoritos"; //Nomeclatura, como ele vai ser chamado

export default function FavoritosProvider({ children }) {
    const [favoritos, setFavoritos] = useState([]); //Criando estado para armazenar os favoritos

    return (
        <FavoritosContext.Provider
            value={{ favoritos, setFavoritos }}>
            {children}
        </FavoritosContext.Provider>
    )
}

//Hook personalizados
export function useFavoritoContext() {
    const { favorito, setFavorito } = useContext(FavoritosContext); //Retorna os valores de provider

    function adicionarFavorito(novoFavorito) {
        const favoritoRepetido = favorito.some(item => item.id === novoFavorito.id); //Procura na lista se tem um favorito igual ao que esta sendo adicionado

        let novaLista = [...favorito]; //Fazendo nova lista

        //Se não ouver item repetido vai adicionar a lista de favoritos
        if (!favoritoRepetido) {
            novaLista.push(novoFavorito);
            return setFavorito(novaLista);
        }

        //Caso seja repetido (Desfavoritar o filme)
        novaLista.filter((item) => item.id !== novoFavorito.id);
        return setFavorito(novaLista);
    }
    return {
        favorito,
        adicionarFavorito
    }
}

import { useFavoritoContext } from 'contextos/Favoritos';
import styles from './Card.module.css';
import iconeFavoritar from './favoritar.png';
import iconeDesfavoritar from './desfavoritar.png';

function Card({ id, capa, titulo }) {
    const {favorito, adicionarFavorito} = useFavoritoContext();

    const ehFavorito = favorito.some((item) => item.id === id);

    const icone = ehFavorito ? iconeFavoritar : iconeDesfavoritar;

    return (
        <div className={styles.container}>
            <img src={capa} alt={titulo} className={styles.capa} />
            <h2>{titulo}</h2>
            <img src={icone}
                alt='Favoritar filme'
                className={styles.favoritar}
                onClick={() => {
                    adicionarFavorito({ id, titulo, capa })
                }} />
        </div>
    )
}

export default Card;

Se alguem poderia me ajudar por favor.