Pessoal fiz os codigos de acordo com o que foi passado na aula mas nenhum card e criado, podem me ajudar por gentileza a dizer se existe algum erro no meu codigo, ja fiz de tudo não consigo achar nenhum erro.

Classe colaborador.js

import './Colaborador.css'

const Colaborador = ({nome,imagem,cargo,cordeFundo})=>{
   return(<div className='colaborador'>
   <div className='cabecalho' style={{backgoundColor: cordeFundo}}>
        <img src={imagem} alt={nome}/>
      </div>
      <div className='rodape'>
       <h4>{nome}</h4>
       <h5>{cargo}</h5>
      </div>
   </div>)
}
export default Colaborador

Classe Time.js

import './Colaborador.css'

const Colaborador = ({nome,imagem,cargo,cordeFundo})=>{
   return(<div className='colaborador'>
   <div className='cabecalho' style={{backgoundColor: cordeFundo}}>
        <img src={imagem} alt={nome}/>
      </div>
      <div className='rodape'>
       <h4>{nome}</h4>
       <h5>{cargo}</h5>
      </div>
   </div>)
}
export default Colaborador

Clase app.js

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




function App() {
 const times=[
  {
   nome: 'Programação',
   corPrimaria:'#57C278',
   corSecundaria:'#D9F7E9',
  },
  {
  nome: 'Front-End',
  corPrimaria:'#82CFFA',
  corSecundaria:'#E8F8FF',
 },
 {
  nome:'Data Science',
  corPrimaria:'#A6D157',
  corSecundaria:'#F0F8E2',
 },
 {
  nome: 'Devops',
  corPrimaria:'#E06B69',
  corSecundaria:'#FDE7E8',
 },
 {
  nome: 'UX e Designer',
  corPrimaria:'#DB6EBF',
  corSecundaria:'#FAE9F5',
 },
 {
  nome: 'Mobile',
  corPrimaria:'#FFBA05',
  corSecundaria:'#FFF5D9',
},
{
  nome: 'Inovação e Gestão',
  corPrimaria:'#FF8A29',
  corSecundaria:'#FFEEDF',
},
 ]

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

  }
  
    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.filter(colaborador=>colaborador.time===time.nome)}
      />)}
      
   

    </div>
  );
}

export default App;