[Dúvida] Não consigo mudar as cores com o id | React: como os componentes funcionam

Fiz a instalação do uuid, importei no App.js, acrescentei a id nos campos em que foram pedidos na aula, mas minha página não consegue mais mudar as cores dos times e colaboradores. O que pode ter dado errado?

Exemplo do App.js:

import { v4 as uuidv4 } from 'uuid';

function App() {

  const [times,setTimes] = useState([

    {
      id: uuidv4(),
      nome: 'Programação',
      cor: '#D9F7E9'
    },
    
// código omitido

  ]);
  
  
  
    const inicial = [
    {
      id: uuidv4(),
      nome: 'EDUARDO AUGUSTO',
      cargo: 'Aluno',
      imagem: 'https://github.com/minhapaginadogithub.png',
      time: times[0].nome
    },
]


  const [colaboradores, setColaboradores] = useState(inicial)
  

  function mudarcorDoTime (cor, id){
    setTimes(times.map(time => {
      if (time.id === id) {
        time.cor = cor;
      }
      return time;
    }))
  }
  
  
  // código omitido
  
  
  export default App;

No index.js da pasta Time, eu tenho feito de uma forma um pouco diferente. Enquanto que o professor tem usado diversos parâmetros na função Time, eu uso somente o props. Até agora tenho conseguido adaptar o código e ele funcionava. Não creio que este seja o motivo do erro, mas está escrito assim:

const Time = (props) => {
    const cssEstilo = {backgroundImage: 'url(/imagens/fundo.png)', backgroundColor: hexToRgba(props.cor, '0.6')}

    return (
        (props.colaboradores.length > 0) ? <section className="time" style={cssEstilo}>
            <input onChange={evento => props.mudarCor(evento.target.value, props.id)} value={props.cor} type="color" className="input-cor" />
            <h3 style={{borderColor: props.cor}}>{props.nome}</h3>
            <div className="colaboradores">
            {props.colaboradores.map (colaborador => {

                return <Colaborador
                key={colaborador.nome}
                nome={colaborador.nome}
                cargo={colaborador.cargo}
                imagem={colaborador.imagem}
                corDeFundo={props.cor}
                aoDeletar = {props.aoDeletar}
            
                />
            })}
            </div>

        </section>
        : ""
    )
}

export default Time

Quando tento mudar as cores com o botão do input, além das cores não mudarem, não aparece nenhuma mensagem de erro no console do navegador...

E se eu for até a função mudarCorDoTime no App.js, renomear os "id" para "nome" e fazer o mesmo no input onChange do index.js da pasta Time, as cores mudam normalmente conforme eu mexo no botão. Será que é algum conflito com o termo "id" no decorrer dos códigos?

Consegui resolver o problema.

Faltou acrescentar um id={nome.id} no times.map no final do código do App.js.

Além disso, é necessário colocar id={colaborador.id} dentro do "return <Colaborador" na pasta Time para que o botão de deletar colaborador funcione corretamente.

return (
    <div className="App">
      <Banner />
      <Formulario times={times.map (time => time.nome)} aoColaboradorCadastrado={colaborador => setColaboradores([...colaboradores, colaborador])}/>

      <section className='times'>
      <h1>Minha Organização</h1>

      {times.map(time => <Time
        mudarCor = {mudarcorDoTime}
        key={time.nome}
        id={time.id}
        nome={time.nome}
        cor={time.cor}
        colaboradores={colaboradores.filter (colaborador => colaborador.time === time.nome)}
        aoDeletar={deletarColaborador}
        />)}

      </section>

      <Rodape />

    </div>
  );