[Dúvida] onDelete is not a function

Olá estou tendo um problema quando tento deletar o card do colaborador. Estou seguindo as aulas mas no final quando eu clico para excluir parece que a função com o parametro id dentro do onclick não é uma função. Poderiam me ajudar?

Segue Código :

App.jsx:

import { useState } from 'react'
import { Banner } from './components/Banner'
import { Form } from './components/Form'
import { Team } from './components/Team'
import { v4 as uuidv4 } from 'uuid';
import { Employee } from './components/Card';


function App() {  

  const [teams, setTeams] = useState( [
    {

      id: uuidv4(),
      name: 'Programação',
      color: '#57C278',
    },
    {
      id: uuidv4(),
      name: 'Front-End',
      color: '#82CFFA',
    },
    {
      id: uuidv4(),
      name: 'Data Science',
      color: '#A6D157',
    },
    {
      id: uuidv4(),
      name: 'Devops',
      color: '#E06B69',
    },
    {
      id: uuidv4(),
      name: 'UX e Design',
      color: '#DB6EBF',
    },
    {
      id: uuidv4(),
      name: 'Mobile',
      color: '#FFBA05',
    },
    {
      id: uuidv4(),
      name: 'Inovação e Gestão',
      color: '#FF8A29',
    }
  ]);

 .....
 const initial = ....
 .....



  function deleteEmployee (id) {
      setEmployees(employees.filter(employee => employee.id !== id));
  }

  function changeColorTeam (color, id) {
    setTeams (teams.map(team => {
      if ( team.id === id){
        team.color = color;
      }
      return team;
    }))
  }

  const [ employees, setEmployees] = useState(initial)

  const onAddEmployee = (employee) => {
    console.log(employee)
    setEmployees( [...employees, employee])
  }
  return (
    <>
      <Banner />
      <Form teams={teams.map( team => team.name)} onRegisteredEmployee={ employee => onAddEmployee(employee)} />
      
      {teams.map( (team) =>  <Team
      changeColor={changeColorTeam}
      key={team.name}
      name={team.name}
      color={team.color}
      employees={employees.filter( employee => employee.team === team.name)}
      onDelete= {deleteEmployee}
      id={team.id}
      />
      
      )}
    </>

  )
}

export default App

Team.jsx:

import hexToRgba from 'hex-to-rgba';
import { Employee } from '../Card';
import './Team.css';
import { PropTypes } from 'prop-types';

export const Team = (props) => {
    return (
       (props.employees.length > 0) ? <section className='team' style={{ backgroundColor: hexToRgba( props.color, '0.3')  }}>
        <input type="color" 
        value={props.color} 
        onChange={event => props.changeColor( event.target.value, props.id)}
        className='input-color'  />
            <h3 style={{ borderColor: props.color }}>{props.name}</h3>

            <div className='employees'>
                {props.employees.map(employee => {
                return <Employee
                    key={employee.name}
                    backgroundColor={props.color}
                    name={employee.name}
                    proffession={employee.proffession}
                    image={employee.image}
                    onDelete={employee.onDelete}
                    id={employee.id} />}
                    
                    )}
            </div>
        </section>
    : ""
    )
}

Team.propTypes = {
    name: PropTypes.string,
    color: PropTypes.string,
    employees: PropTypes.array,
    onDelete: PropTypes.func,
    changeColor: PropTypes.func,
    id: PropTypes.string,
    
}

Employee.jsx:

import { RiCloseCircleFill} from 'react-icons/ri';

import './Card.css';
import { PropTypes } from 'prop-types';

export const Employee = ({name, proffession, image, backgroundColor, onDelete, id}) => {
   

    return (
    <div className='employee'> 
        <RiCloseCircleFill
            size={24}
            className='delete'
            onClick={() => onDelete(id)}
        />
        <div className='header' style={{ backgroundColor: backgroundColor}}>
            <img src={image} alt={name}/>
        </div>
        <div className='footer'>
            <h4>{name}</h4>
            <h5>{proffession}</h5>
        </div>
    </div>
    )
}

Employee.propTypes = {
    name: PropTypes.string,
    proffession: PropTypes.string,
    image: PropTypes.string,
    backgroundColor: PropTypes.string,
    onDelete: PropTypes.func,
    id: PropTypes.string,
}