Imagem, nome e cargo não aparecem no card ao clicar no botão.

Após eu criar as props no componente colaborador para o componente Time receber essas props, o card não aparece. Antes quando o colaborador era fixo estava tudo funcionando e aparecendo a foto etc, foi quando criei as props e em seguida desestruturei elas para ficar apenas as variáveis (nome, cargo, imagem) que os cards não apareceram mais. Será que alguem pode me ajudar? :) Já olhei, refiz e estou empacada nisso rshttps://github.com/naritagodoy/formulariodreamteam

Componente Colaborador:

`import './colaborador.css'

const Colaborador = ({nome, cargo, imagem}) => {
    return (
        <div className='colaborador'> 
            <div className='cabecalho'> 
                <img className='img' src={imagem} alt={nome}/>
            </div>

            <div className='rodape'>
                <h4>{nome}</h4>
                <h5> {cargo}</h5>
            </div>
        </div>
    )
}

export default Colaborador`

componente time:

`import Colaborador from '../Colaborador'
import './Time.css'

const Time = (props) => {

    return(

        <section style={{backgroundColor:props.corSecundaria}} className='time'>
        <h3 style={{borderColor: props.corPrimaria}}>{props.nome}</h3>
        
        {props.colaboradores.map(colaborador => <Colaborador nome={colaborador.nome} cargo={colaborador.cargo} imagem={colaborador.imagem}/>)}
        
    

</section>

    )
}

export default Time`

app.js

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


function App() {

  const Times = [

    {
      nome:'Parto domiciliar',
      corPrimaria:'#57C278',
      corSecundaria:'D9F7E9'
    },
    {
      nome:'Parto hospitalar',
      corPrimaria:'#82CFFA',
      corSecundaria:'#E8F8FF'
    },
    {
      nome:'Amamentação',
      corPrimaria:'#A6D157',
      corSecundaria:'#FOF8E2'
    },
    {
      nome:'Laserterapia',
      corPrimaria:'#E06B69',
      corSecundaria:'#FDE7E8'
    },
    {
      nome:'Humanização da assistência',
      corPrimaria:'#DB6EBF',
      corSecundaria:'#FAE9F5'
    }
  ]
  


  const [colaboradores, setColaboradores] = useState ([''])
  const aoNovoColaboradorAdicionado = (colaborador) => {
        console.log(colaborador)
        setColaboradores([...colaboradores, colaborador])
  }

  return (
    <div className="banner">
      <Banner />
      <Formulario 
      Times={Times.map(time => time.nome)} 
      aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)}/>
      
     {Times.map(time => <Time 
     key={time.nome} 
     nome={time.nome} 
     corPrimaria={time.corPrimaria} 
     corSecundaria={time.corSecundaria}
     colaboradores={colaboradores}
     
     />)}
  
  
         
    </div>
  );
}

export default App;