Com relação a este pedaço do código:
const rotas =[{
label: 'Início',
to: '/'
}, {
label: 'Cardápio',
to: '/cardapio'
}, {
label: 'Sobre',
to: '/sobre'
}];
return (
<nav className={styles.menu}>
<Logo />
<ul>
{rotas.map((rota, index) => (
<li key={index}>
<a href={rota.to}>
{rota.label}
</a>
</li>
Passamos como parâmetro do map "rota" e "index". Com relação a este index, ele não é declarado em momento nenhum. Ele está pegando literalmente o index do Array, certo? Só de utilizar a palavra "index" ele já entende que é essa propriedade do Array que estamos querendo pegar?