Queria continuar o projeto do curso anterior

Boa tarde, estou tentando acompanhar este curso mantendo o projeto do Organo que realizei no outro curso de React com o prof. Vinicios (React: Desenvolvendo com JavaScript)

Porém existem algumas divergências de um projeto para o outro e não consegui arrumar... por exemplo, no index de Time, estavamos utilizando props e não os parâmetros específicos.. Então não estou conseguindo linkar a função aoDeletar (retorna sempre um objeto vazio)

Segue o código: A temática do meu projeto é senhor do anéis, então CardsRaca equivale ao Time

const CardsRaca = (props, aoDeletar) => {

    const css = { 
        backgroundColor: props.corSecundaria
    }

    return (
        props.personagens.length > 0 && <section className="cards-raca" style={css}>
            <h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
            <div className="cards-personagem">
                {props.personagens.map( personagem => {
                    console.log(<Personagem 
                        key={personagem.nome}
                        nome={personagem.nome} 
                        historia={personagem.historia}
                        imagem={personagem.imagem}
                        corDeFundo={props.corPrimaria}
                        aoDeletar= {aoDeletar}
                    />)
                    return <Personagem 
                        key={personagem.nome}
                        nome={personagem.nome} 
                        historia={personagem.historia}
                        imagem={personagem.imagem}
                        corDeFundo={props.corPrimaria}
                        aoDeletar= {props.aoDeletar}
                    />})}
            </div>
        </section>
    )
}

function App() {

    const racas = [
        {
            nome: "Ainur",
            corPrimaria: "#57C278",
            corSecundaria: "#D9F7E9"
        },
        {
            nome: "Anões",
            corPrimaria: "#82CFFA",
            corSecundaria: "#E8F8FF"
        },
        {
            nome: "Criaturas",
            corPrimaria: "#A6D157",
            corSecundaria: "#F0F8E2"
        },
        {
            nome: "Elfos",
            corPrimaria: "#E06B69",
            corSecundaria: "#FDE7E8"
        },
        {
            nome: "Hobbits",
            corPrimaria: "#FFBA05",
            corSecundaria: "#FFF5D9"
        },
        {
            nome: "Humanos",
            corPrimaria: "#FF8A29",
            corSecundaria: "#FFEEDF"
        },
    ]

    const [personagens, setPersonagens] = useState([])

    const personagemAdicionado = (personagem) => {
        // debugger
        // console.log(personagem)
        setPersonagens([...personagens, personagem])
    }

    function deletarPersonagem() {
        console.log("deletando personagem")
    }

    return (
        <div className="App">
            <Banner />
            <Form racas={racas.map(raca => raca.nome)} aoPersonagemCadastrado={personagem => personagemAdicionado(personagem)} />

            {racas.map(raca => 
                <CardsRaca
                    key={raca.nome} 
                    nome={raca.nome} 
                    corPrimaria={raca.corPrimaria} 
                    corSecundaria={raca.corSecundaria} 
                    personagens={personagens.filter(personagem => personagem.raca === raca.nome)}
                    aoDeletar={deletarPersonagem}
                />
            )}
            <Rodape />

        </div>
    );
}

alguém consegue me dar uma luz? grato!