[Bug] Meu código não aparece o nome do cargo e o nome do colaborador

Esse aqui é meu código

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

function App() {

  const times = [
    {
      nome: "Programação",
      corPrimaria: "#57C278",
      corSecundaria: "#D9F7E9"
    }, {
      nome: "Front-end",
      corPrimaria: "#82CFFA",
      corSecundaria: "#E8F8FF"
    }, {
      nome: "Data Science",
      corPrimaria: "#A6D175",
      corSecundaria: "#F0F8E2"
    }, {
      nome: "Devops",
      corPrimaria: "#E06869",
      corSecundaria: "#FDE7E8"
    }, {
      nome: "UX e Design",
      corPrimaria: "#D86EBF",
      corSecundaria: "#FAE5F5"
    }, {
      nome: "Mobile",
      corPrimaria: "#FEBA05",
      corSecundaria: "#FFF5D9"
    }, {
      nome: "Inovação e Gestão",
      corPrimaria: "#FF8A29",
      corSecundaria: "#FFEEDF"
    },

  ]

  const [colaboradores, setColaboradores] = useState([])

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

  return (
    <div className="App">
      <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;

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


const Time = (props)  => {
    const css = { backgroundColor: props.corSecundaria }

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

export default Time
    
    
    import './Colaborador.css'

const Colaborador = (props) => {
    return (<div className='colaborador'>
        <div className='cabecalho'>
            <img src='https://github.com/Matheus77md.png' alt='Minha foto' />
        </div>
        <div className='rodape'>
            <h4>{props.nome}</h4>
            <h5>{props.cargo}</h5>
        </div>
    </div>)
}

export default Colaborador