[Projeto] Minha solução

Bem, eu acho que fui um pouco além do proposto kkkkkk

Primeiro, eu criei um contexto para armazenar os vídeos que forem favoritados:

import { createContext, useState } from 'react'
import videos from '@/json/db.json'

export const FilmesContext = createContext()
FilmesContext.displayName= 'Filmes'

export function FilmesProvider({children}) {
    const [favoritos, setFavoritos] = useState([])

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

}

Depois, criei um componente CardContainer para reproveitar o mesmo estilo nas páginas Iníco e Favoritos. Para poder utilizá-lo modifiquei o componente Card para receber apenas o objeto video como propriedade. Ele ficou assim:

import styles from './Card.module.css'
import { useContext, useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart as iconeFavoritar } from '@fortawesome/free-regular-svg-icons'
import { faHeart as iconeDesfavoritar } from '@fortawesome/free-solid-svg-icons'
import { FilmesContext } from '../../context/FilmesContext'

export default function Card({video}) {

    const [ehFavorito, setEhFavorito] = useState(false)
    const { favoritos, setFavoritos } = useContext(FilmesContext)

    function mudarFavorito() {
        setEhFavorito(!ehFavorito)
        if (favoritos.includes(video)) {
            setFavoritos(prev => prev.filter(
                favoritos => favorito.id !== video.id
            ))
        } else {
            setFavoritos([...favoritos, video])
        }
    }

    return (
        <article className={styles.container}>
            <img src={video.capa} alt={video.titulo} className={styles.capa} />
            <h2>{video.titulo}</h2>
            <FontAwesomeIcon
                icon={ehFavorito ? iconeDesfavoritar : iconeFavoritar}
                className={styles.favoritar}
                onClick={mudarFavorito}
            />
        </article>
    )
}

Por fim, a página de favoritos ficou da seguinte forma:

import { useContext } from 'react'
import styles from './Favoritos.module.css'
import { FilmesContext } from '../../context/FilmesContext'
import Banner from '../../components/Banner/Banner'
import Card from '../../components/Card/Card'
import CardContainer from '../../components/CardContainer/CardContainer'
import Titulo from '../../components/Titulo/Titulo'

export default function Favoritos() {

    const { favoritos } = useContext(FilmesContext)

    return (
        <>
            <Banner imagem='favoritos' />

            <Titulo>
                <h1>Meus Favoritos</h1>
            </Titulo>

            <CardContainer>
                {favoritos.length
                    ? (favoritos.map(favorito => (
                        <Card key={favorito.id} video={favorito} />
                      )))
                    : (<p>Você não possui favoritos ainda</p>)}
            </CardContainer>
        </>
    )
}