Estou tentando fazer igual ao video, mas quando tento clicar no deletar na minha pagina ele nao tem funçao de click... pior que olhei tudo e nao vi nada de errado, poderiam me dar uma mao?

Esse é o codigo: App.jsx

import { useState } from 'react'
import Banner from './componentes/Banner'
import Formulario from './componentes/Formulario'
import Time from './componentes/Time'
import RodaPe from './componentes/RodaPe'
import SideBar from './componentes/SideBar'

function App() {

  const times =[
    {
      nome: 'Equilibrado',
      corPrimaria: '#FEBA05',
      corSecundaria: '#FFF5D9'
    },
    {
      nome: 'Ataque total',
      corPrimaria: '#E06B69',
      corSecundaria: '#FDE7E8'
    },
    {
      nome: 'Cura muito',
      corPrimaria: '#87C278',
      corSecundaria: '#D9F7E9'
    },
    {
      nome: 'Tanka tudo',
      corPrimaria: '#DB6EBF',
      corSecundaria: '#FAE9F5'
    }
  ]

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


  const aoJogadorAdicionado = (jogador) => {
    console.log(jogador)
    setJogadores([...jogadores, jogador])
  }

  function deletarJogador () {
    console.log("deletando jogador")
  }

  return (
    <div className='App'>
      <SideBar/>
      <Banner/>
      <Formulario times={times.map(time => time.nome)} aoJogadorCadastrado={jogador => aoJogadorAdicionado(jogador)}/>

      {times.map(time => 
        <Time 
          key={time.nome} 
          nome={time.nome} 
          corPrimaria={time.corPrimaria} 
          corSecundaria={time.corSecundaria} 
          jogadores={jogadores.filter(jogador => jogador.time == time.nome)}
          aoDeletar={deletarJogador}
        />
      )}

        <RodaPe/>
      
    </div>
      
    
  )
}

export default App

Time

/* eslint-disable react/prop-types */

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

const Time = (props) => {
    return (
        props.jogadores.length > 0 && <section className='time' style={{backgroundColor: props.corSecundaria}}>
         <h3 style={{borderBlockColor: props.corPrimaria}}>{props.nome}</h3>
         <div className='jogadores'>
         {props.jogadores.map(jogador => <Jogador corFundo={props.corPrimaria} key={jogador.nome} nome={jogador.nome} personagem={jogador.personagem} imagem={jogador.imagem} aoDeletar={jogador.aoDeletar}/>)}
         </div>
        </section>
    )
}

export default Time

Jogador

/* eslint-disable react/prop-types */
import './Jogador.css'

const Jogador = ({nome, imagem, personagem, corFundo, aoDeletar}) => {
    return(<div className='jogador'>
        <div className='deletar' onClick={aoDeletar}>deletar</div>
        <div className='cabecalho' style={{backgroundColor: corFundo}}>
            <img src={imagem} alt={nome} />
        </div>
       <div className='rodape'>
            <h4>{nome}</h4>
            <h5>{personagem}</h5>
       </div>

    </div>
    )
}

export default Jogador