[Dúvida] Tela em branco, problemas com o .map

Boa tarde, após eu colocar a função:

{props.Colaboradores.map(colaborador => <Colaborador />)}  

minha tela fica toda branca e não consigo continuar.

App.js

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




function App() {

  const Times = [

    {
      Nome: 'Programação',
      corPrimaria: '#57C278', 
      corSecundaria: '#09F7E9',
    },

    {
      Nome: 'Front-end',
      corPrimaria: '#82CFFA', 
      corSecundaria: '#E8F8FF',
    },

    {
      Nome: 'Data-science',
      corPrimaria: '#A6D157', 
      corSecundaria: '#F0F8E2',
    },

    {
      Nome: 'Develops',
      corPrimaria: '#E06869', 
      corSecundaria: '#FDE7E8',
    },

    {
      Nome: 'UX e Design',
      corPrimaria: '#DB6E8F', 
      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, colaborador ])
  }

  return (
    /* JSX */
    <div className="App">
    <Banner/>
    <Formulario Times={Times.map(Times => Times.Nome)} 
    aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)}/>

    {Times.map(time => <Time 
    key={time.Nome} 
    Nome={time.Nome} 
    corPrimaria={time.corPrimaria} 
    corSecundaria={time.corSecundaria} />  )}





    </div>
  );
}

export default App;

time/index.js

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


const Time = (props) => {
    const css = {backgroundColor: props.corSecundaria}
    const cssTitulo = {borderColor: props.corPrimaria }

    return (

        <section className='Time' style={css}>
            <h3 style={cssTitulo}>{props.Nome} </h3>

            {props.Colaboradores.map(colaborador => <Colaborador />)}    

        </section>

    ) 

}

export default Time

Colaborador.js

import './Colaborador.css'

const Colaborador = () => {
    return(
        <div className='colaborador'>
            <div className='cabecalho'>
                <img src='https://github.com/vinivazzz.png' alt='imagem de perfil github' />
            </div>

            <div className='rodape'>
                <h4>Vinicius Augusto</h4>
                <h5>Software engineer Front-end</h5>
            </div>
        </div>
    )

}

export default Colaborador