[Bug] mudarCor is not a function

app.js

const [times, setTimes] = useState ([
    //a diferença aqui é que aqui cada time receberá uma cor diferente.

    {
      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'
    },
  ])

  function mudarCorDoTime (nome, cor) {
    setTimes(times.map(time => {
      if (time.nome === nome) {
        time.corPrimaria = cor;
      }
      return time;
    }));
  }

{times.map(time => <Time
        mudarCor={mudarCorDoTime} 
        key={time.nome}

time => index.js

const Time = (props, aoDeletar, mudarCor) => {
    const css = {backgroundColor: props.corSecundaria}

    return (
        (props.colaboradores.length) > 0 ? <section className='time' style={css}>
            <input onChange={evento => mudarCor(evento.target.value, props.nome)} value={props.corPrimaria} type='color' className='input-cor' />
            <h3 style={{borderColor: props.corPrimaria}}>{props.nome}</h3>
            <div className='colaboradores'>
                {props.colaboradores.map(colaborador => {
                
                return <Colaborador corDeFundo={props.corPrimaria} key={colaborador.nome} nome={colaborador.nome} cargo={colaborador.cargo} imagem={colaborador.imagem} aoDeletar={props.aoDeletar}/>})}
            </div>
        </section>
        : ''
    )
}

o que esta acontecendo aqui?