Problema com MAP de geração dos Cards

Estou com o erro e não consigo encontrar o problema...

props.colaboradores.map is not a function TypeError: props.colaboradores.map is not a function at Time (http://localhost:3000/main.dfef35b04a1badeca980.hot-update.js:40:40) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20635:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23919:17) at beginWork (http://localhost:3000/static/js/bundle.js:25215:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10231:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10275:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10332:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30196:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29444:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29367:9)

import { useState } from 'react';
import Banner from './components/Banner';
import Formulario from './components/Form';
import Time from './components/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: 'UXe 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([...colaboradores, colaborador])
  }

  return (
    <div className="App">
      <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}
        colaboradores={colaboradores}
      />)}
    </div>
  );
}

export default App;

import './Colaborador.css'

const Colaborador = (props) => {
  return(
    <div className='colaborador'>
      <div className='cabecalho'>
        <img src='https://github.com/felipqsquall.png' alt='Felipe Rosa'/>
      </div>
      <div className='rodape'>
        <h4>{props.nome}</h4>
        <h5>{props.cargo}</h5>
      </div>
    </div>
  )
}

export default Colaborador;