Após inserir o Filter, o Card não aparece no Navegador | React: desenvolvendo com JavaScript

Antes de digitar a linha do "Filter" tudo funcionando normalmente agora não está carregando o Card quando clico em Criar Card.

import { useState } from 'react'; import Banner from './componentes/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:'#A6D157', corSecundaria:'#F0F8E2' }, { nome:'Devops', corPrimaria:'#E06B69', 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 (

<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>

); }