Card não aparece mais.

Resolvi assistir até o final e ver algumas dúvidas aqui se resolvia a questão do card e infelizmente não consegui resolver o problema.

Inicialmente aparecia até o card em branco, agora depois que apliquei o filter nem o card aparece mais.

app.js

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


function App() {

  const equipes = [
    {
      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: '#DB6EBF',
      corSecundaria: '#FAE9F5'
    },
    {
      nome: 'Mobile',
      corPrimaria: '#FFBA05',
      corSecundaria: '#FFF5D9'
    },
    {
      nome: 'Inovação e Gestão',
      corPrimaria: '#FF8A29',
      corSecundaria: '#FFEEDF'
    }
  ]

  const [cadastrado, setCadastrado] = useState([])

  const aoNovoCadastrado = (cadastro) => {
    console.log(cadastro)
    setCadastrado([...cadastrado, cadastro])
  }

  return (

    <div className="App">
      <Banner />
      <Formulario times={equipes.map(times => times.nome)} aoCadastrado={cadastro => aoNovoCadastrado(cadastro)} />

      {equipes.map(times => <Times
        key={times.nome}
        nome={times.nome}
        corPrimaria={times.corPrimaria}
        corSecundaria={times.corSecundaria}
        cadastrado={cadastrado.filter(cadastro => cadastro.time === times.nome)}
      />)}

    </div>
  );
}

export default App;

colaborador.js

import './Colaborador.css'

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

export default Colaborador;

time.js

import Colaborador from '../Colaborador'
import './Times.css'

const Times = (props) => {
    const corFundo = { backgroundColor: props.corSecundaria }
    const corDestaque = { borderColor: props.corPrimaria }

    return (
        <section className='Times' style={corFundo}>
            <h3 style={corDestaque}>{props.nome}</h3>
            <div className='colaboradores'>
                {props.cadastrado.map(cadastro => <Colaborador key={cadastro.Nome} Nome={cadastro.Nome} Cargo={cadastro.Cargo} Imagem={cadastro.Imagem} />)}
            </div>
        </section>
    )
}

export default Times;

formulario.js

import { useState } from 'react';
import Botao from '../Botão';
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa';
import './Formulario.css'

const Formulario = (props) => {

    const [Nome, setNome] = useState('')
    const [Cargo, setCargo] = useState('')
    const [Imagem, setImagem] = useState('')
    const [Time, setTime] = useState('')

    const salvando = (e) => {
        e.preventDefault()
        props.aoCadastrado({
            Nome,
            Cargo,
            Imagem,
            Time
        })
    }

    return (

        <section className='Formulario'>
            <form onSubmit={salvando}>
                <h2>Preencha os dados para criar o card do colaborador.</h2>
                <CampoTexto
                    label="Nome"
                    obrigatorio={true}
                    placeholder="Digite seu nome"
                    valor={Nome}
                    alterado={valor => setNome(valor)}

                />
                <CampoTexto
                    label="Cargo"
                    obrigatorio={true}
                    placeholder="Digite seu cargo"
                    valor={Cargo}
                    alterado={valor => setCargo(valor)}
                />
                <CampoTexto
                    label="Imagem"
                    placeholder="Informe o endereço da imagem"
                    valor={Imagem}
                    alterado={valor => setImagem(valor)}
                />
                <ListaSuspensa
                    obrigatorio={true}
                    label="Time"
                    itens={props.times}
                    valor={Time}
                    alterado={valor => setTime(valor)}
                />
                <Botao>
                    Criar card
                </Botao>
            </form>
        </section>
    )
}

export default Formulario;