Quando o filtro é aplicado nao aparece mais os cards

Depois que eu faço a aplicacao do filtro no programa os cards deixam de ser exibidos

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

function App() {

  const cargos = [
    {
      nome : "Server Dev",
      corPrimaria : "#FFBA05",
      corSecundaria : "#FFF5D9"
    },
    {
      nome : "Precoce",
      corPrimaria : "#FF8A29",
      corSecundaria : "#FFEEDF"
    },
    {
      nome : "Server DLC",
      corPrimaria : "#E06B69",
      corSecundaria : "#FDE7E8"
    },
    {
      nome : "Bot",
      corPrimaria : "#57C278",
      corSecundaria : "#D9F7E9"
    },
    {
      nome : "Mara",
      corPrimaria : "#DB6EBF",
      corSecundaria : "#FAE9F5"
    }
  ]

  const [integrantes,setIntegrante] = useState([]);

  const novoIntegrante = (integrante) => {

    console.log(integrante);
    setIntegrante([...integrantes, integrante]);

  }

  return (
    <div className="App">
      <Banner />
      <Formulario cargos={cargos.map( cargo => cargo.nome)}integranteCadastrado={integrante=>novoIntegrante(integrante)}/>
      {cargos.map(time=><Times key={time.nome} 
      nome={time.nome} 
      cor1={time.corPrimaria} 
      cor2={time.corSecundaria}
      integrantes={integrantes.filter(integrante=>integrante.cargo === time.nome)}
      />)}
    </div>
  );
}

export default App;

Card

import "./card.css"

const Card = ({nome,imagem,cargo}) => {

    return(

        <div className="card">
            <div className="cabecalho">
                <img src={imagem} alt={nome}/>
            </div>

            <div className="rodape">
                <h4>{nome}</h4>
                <h5>{cargo}</h5>
            </div>
        </div>

    )

}

export default Card

O codigo esta completo no github: https://github.com/BigPapa6911/Organo