[Bug] Erro no código

Professor eu estou adaptando o projeto do curso anterior para esse , isso juntamente com a diferença que eu fiz do meu projeto organo para o original,

A principio meu projeto estava um pouco diferente estava ultilizando muitas props , e acabou por dar um erro Warning: Expected onClick listener to be a function, instead got a value of object type. então eu mudei algumas partes do código para deixar igual ao do novo projeto, só que mesmo assim ta dando algum erro que eu não to conseguindo achar quando eu clico pra criar o card.

Segue meu código e o erro abaixo :

import { useState } from 'react';
import Banner from './componentes/Banner/index.js';
import Formulario from './componentes/Formulario/index.js';
import Time from './componentes/Time/index.js';
import Rodapé from './componentes/Rodapé/index.js';


function App() {

  const times = [ 
  {
    nome: 'League Of Legends',
    corDoCard: '#daa520',
    corDeFundo: '#255adf',
  },
 //RESTO DOS TIMES OMITIDOS//
]

  const [jogadores, setJogadores] = useState([]) 

  const aoNovoJogadorAdicicionado = (jogador) => 
  setJogadores([...jogadores, jogador]) 
}
    function deletarJogadores() {
      console.log('Deletando Jogadores');
    }

return (
    <div className="App">
      <Banner/>
      <Formulario NomeDosTimes={times.map(time => time.nome)} aoJogadorCadastrado={jogador => aoNovoJogadorAdicicionado(jogador)} />
      {times.map((time,indice) => 
      <Time
        key={indice} 
        time={time}
        jogadores={jogadores.filter(jogador => jogador.time === time.nome )}
        aoDeletar={deletarJogadores}
      />)}
      <Rodapé/>
    </div>
  ); 
}

export default App;



import Jogador from '../Jogadores'
import './Time.css'

const Time = ({time , jogadores , aoDeletar}) => {

    return (
        (jogadores.length > 0) ? 
        <section className='time' style={time.corDeFundo}>
            <h3 style={{color: time.corDoCard}}>{time.nome}</h3>
            <div className='jogadores'>
                {jogadores.map((jogador, indice)  => {
                    return <Jogador key={indice} jogador={jogador} aoDeletar={aoDeletar} corDoNome={time.corDoCard} corDoCard={time.corDoCard}/>;
                })}
            </div>
        </section>
        : ''
    )
} 

export default Time

import './Jogador.css'

const Jogador = ({ jogador,corDoCard, corDoNome, aoDeletar}) => {
    return (
    <div className='Jogador'>
        <div className='deletar' onClick={aoDeletar}>deletar</div>
        <div className='cabecalho' style={{backgroundColor: corDoCard}}>
            <img className='icone__jogador' src={jogador.imagem} alt={jogador.nome}></img>
        </div>

        <div className='rodape'>
            <h4 style={{color: corDoNome}}>{jogador.nome}</h4>
            <h5>{jogador.função}</h5>
        </div>

        <div className='rodape' id='card'>
            <img className='imagem__avatar' src={jogador.avatar} alt={jogador.avatar}></img>
        </div>

        <div style={{backgroundColor: corDoCard}} className='Card__Avatar' id='personagem'>
            <h4>{jogador.personagem}</h4>
        </div>

    </div>)
}

export default Jogador