Olá, Eduardo. Tudo bem?

O problema aqui é que, no seu código, você está passando a função aoDeletar diretamente no onClick, mas sem os parênteses. Isso significa que a função só será chamada quando o evento ocorrer.

Se você tivesse escrito assim:

onClick={aoDeletar}

O React apenas referenciaria a função, sem executá-la imediatamente.

Mas, ao escrever assim:

onClick={aoDeletar()}

Você está chamando a função no momento da renderização, o que pode causar problemas.

Para corrigir isso e garantir que a função só execute quando o botão for clicado, você pode fazer assim:

onClick={() => aoDeletar()}

Ou, se a função aoDeletar precisar de um parâmetro, algo como:

onClick={() => aoDeletar(colaborador.id)}

Isso cria uma função anônima que será chamada apenas quando o clique acontecer.

Ajuste seu código assim:

import './colaborador.css'

const Colaborador = ({ colaborador, corDeFundo, aoDeletar }) => {  
  return (
    <div className="colaborador">
      <button onClick={() => aoDeletar()}>Deletar</button>
      <div className="cabecalho" style={{ backgroundColor: corDeFundo }}> 
        {colaborador.nome}
        {colaborador.cargo}
      </div>
    </div>
  );
};

export default Colaborador;

Isso garante que a função aoDeletar só seja executada quando o botão for clicado. Verifique se a função em sí, está correta.

Espero ter ajudado. Conte com o apoio do Fórum. Fico à disposição.

Bons estudos!