[Bug] [ERROR] Cannot read properties of undefined (reading 'map')

Olá, boa noite!

Não estou conseguindo fazer o map funcionar, já mexi nas props, nas variáveis de estado e não consegui fazer rodar.

o seguinte erro aparece:

"Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map')"

Segue código:

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: '#DB6EBF',
      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) => {
    setColaboradores([...colaborador, colaboradores])
  }

  return (
    <div>
      <Banner />
      <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}
      colaborador ={colaboradores}
      />)}

     
      
    </div>
  );
}

export default App;

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.colaborador.map(colaboradores => <Colaborador />)}
        </section>
    )
} 

export default Time;

import './Colaborador.css'

const Colaborador = (props) => {
    return (
        <div className='colaborador'>
            <div className='cabecalho'>
                <img src='https://github.com/rackelberbet.png' alt='Rackel Berbet'/>
            </div>

            <div className='rodape'>
                <h4>a</h4>
                <h5>a</h5>
            </div>
        </div>
    )
}

export default Colaborador

Agradeço desde já!