Os valores de Colaboradores não são passados pelo props

Oi Vini, estou tentando passar os valores dos colaboradores mas não estão sendo passados, logo os cards criados estão todos em branco.

meu código é esse aqui

import { useState } from "react";
import Banner from "./Componentes/banner/banner";
import { Colaborador } from "./Componentes/Colaborador";

import Formulario from "./Componentes/Formulario";
import { Time } from "./Componentes/Time";

const times = [
  {
    nome: "Programação",
    corPrimaria: "#57C278",
    corSecundaria: "rgba(0, 200, 111, 0.15)",
  },
  { nome: "Front-End", corPrimaria: "#82CFFA", corSecundaria: "#E8FFFF" },
  { nome: "Data-Science", corPrimaria: "#A6D157", corSecundaria: "#E9FFE3" },
  {
    nome: "Devops",
    corPrimaria: "#E06B69",
    corSecundaria: " rgba(241, 97, 101, 0.15)",
  },
  {
    nome: "Ux and Design",
    corPrimaria: "#DB6EBF",
    corSecundaria: "rgba(220, 110, 190, 0.15)",
  },
  {
    nome: "Mobile",
    corPrimaria: "#FFBA05",
    corSecundaria: "rgba(255, 186, 5, 0.15)",
  },
  {
    nome: "Inovação e Gestão",
    corPrimaria: "#FF8A29",
    corSecundaria: " rgba(255, 140, 42, 0.15)",
  },
];

function App() {
  let [colaboradores, setColaboradores] = useState([]);
                                                        // aqui estou utilizando o map na sua função mais básica, pega uma coisa e retorna outra transformada em um novo array
  return (
    <div className="App">
      <Banner />                        
      <Formulario timeNome={times.map(time => time.nome)}
        cadastrarColaborador={(colaborador) => {
          setColaboradores([...colaboradores, colaborador]);
        }}
        colaborador={colaboradores}
      />
      {times.map((time) => (
        <Time
          key={time.nome}
          nome={time.nome}
          corPrimaria={time.corPrimaria}
          corSecundaria={time.corSecundaria}
          colaboradores={colaboradores}
        />
      ))}
    </div>
  );
}

export default App;
// tal como na função informamos a props(parametro) dentro do componente

import { Colaborador } from '../Colaborador'
import './time.css'

 export const Time = (props)=>{
    return(
        <section className='time' style={{backgroundColor: props.corSecundaria}} >
            <h3 style={{color:props.corPrimaria}} >{props.nome}</h3> 
            <div className='flexContainer'>
            {props.colaboradores.map(colaborador => <Colaborador  nome={colaborador.nome}  imagem={colaborador.imagem}  cargo={colaborador.cargo}/>  )}
           </div>
        </section>
    )
}

import "./colaborador.css"
                                       // esta é uma outra forma de passar props de forma desestruturada. Dessa forma só os props que foram passados como parâmetros será lido
 export const Colaborador = (props)=>{
    return (
      <div className="colaborador">
        <div className="cabecalho">
          <img src={props.imagem} alt={props.nome} />
        </div>
        <div className="rodape">
            <h4>{props.nome}</h4>
            <h5>{props.cargo}</h5>
        </div>
      </div>
    );

}