Meus Cards ficam em branco ao tirar do estatico

atualizo o formulario e envio para a criação do Card, mas renderiza os cards em branco.

warning do console:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of Time. See https://reactjs.org/link/warning-keys for more information. at Colaborador (http://localhost:3000/static/js/bundle.js:384:5) at Time (http://localhost:3000/static/js/bundle.js:743:28) at div at App (http://localhost:3000/static/js/bundle.js:62:92)

app js

import { useState } from 'react';
import Banner from './componentes/Banner'
import Formulario from './componentes/Formulario/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: '#DB6EBF',
      corSecundaria: '#FAE9F5'

    },
    {
      nome: 'Mobile',
      corPrimaria: '#FFBA05',
      corSecundaria: '#FFF5D9'

    },
    {
      nome: 'Inovação e Gestão',
      corPrimaria: '#FF8A09',
      corSecundaria: '#FFEEDF'

    }

  ]

  const [colaboradores, setColaboradores] = useState([])

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

  }
  return (
    <div className="App">
      <Banner />
      <Formulario nomeDosTimes={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}

        />)}


    </div>
  );
}

export default App;

time js

import Colaborador from '../Colaborador'
import './Time.css'

const Time = (props) => {
    const css = { backgroundColor: props.corSecundaria }
    return (


        <section className='time' style={css}>
            <h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
            {props.colaboradores.map(colaborador =>
                <Colaborador
                    nome={colaborador.nome}
                    cargo={colaborador.cargo}
                    imagem={colaborador.imagem}
                     />)}


        </section>
    )

}

export default Time

colaborador js

import './Colaborador.css'

const Colaborador = ({Nome, Imagem, Cargo}) => {
    return (<div className='colaborador'>
        <div className='cabecalho'>
            <img src={Imagem} alt={Nome} />
        </div>
        <div className='rodape'>
            <h4>{Nome} </h4>
            <h5>{Cargo}</h5>

        </div>
    </div>
    )
}
export default Colaborador