Coloquei o .map() no Time.js

No vídeo "elevando a lista de times" eu fiquei em dúvida pq o .map() foi usado no App.js e não no Time.js (como foi feito na ListaSuspensa.js). A dúvida é questão de estilo, boas práticas, manutenção etc?

Eu coloquei o .map() no Time.js e deu certo, fiz assim:

no App.js

...
/* Meu código */
<Time itens={times}/>

/* código da aula
{times.map(time => 
<Time 
    key={time.nome} 
    nome={time.nome} 
    corPrimaria={time.corPrimaria} 
    corSecundaria={time.corSecundaria}/>)} */
...

No Time.js

import './Time.css'

const Time = (props) => {
/* código da aula
    const corDeFundo = {backgroundColor: props.corSecundaria}
    const corPrincipal = {borderColor: props.corPrimaria}
*/

/* Meu código */
    return (
        <div>
        {props.itens.map(time => {
            return (
                <section 
                    key={time.nome} 
                    style={{backgroundColor: time.corSecundaria}} 
                    className='time'
                >
                    <h3 style={{borderColor: time.corPrimaria}}>{time.nome}</h3>
                </section>
            )
        })}
        </div>

        /* Código da aula
        <section style={corDeFundo} className='time'>
             <h3 style={corPrincipal}>{props.nome}</h3>
        </section>
        */
    )
}

export default Time

Funcionou tudo ok.