Meu componente ItemNavegacao

Fiz o ItemNavegacao um pouco diferente do professor:

import styled from "styled-components"

export default function ItemLista({ nomeIcone, status = 'inativo', children }) {

    const caminhoImagem = `/icones/${nomeIcone}-${status}.png`

    const ItemEstilizado = styled.li`
        display: flex;
        align-items: center;
        gap: 22px;
        font-size: 24px;
        color: ${props => props.$status === 'ativo' ? '#7B78E5' : ''};
        font-family: ${props => props.$status === 'ativo' ? 'GandhiSansBold' : 'GandhiSansRegular'};

        img {
            width: 32px;
        }
    `

    return (
        <ItemEstilizado $status={status}>
            <img src={caminhoImagem} alt="" />
            <a href="">{children}</a>
        </ItemEstilizado>
    )
}

E no elemento-pai eles ficaram assim:

import styled from "styled-components"
import ItemLista from "../ItemLista"

const ListaEstilizada = styled.ul`
    color: white;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 32px;

`

export default function BarraLateral() {
    return (
        <aside>
            <nav>
                <ListaEstilizada>
                    <ItemLista
                        nomeIcone={'home'}
                        status={'ativo'}
                    >Início</ItemLista>

                    <ItemLista nomeIcone={'mais-vistas'}>Mais vistas</ItemLista>

                    <ItemLista nomeIcone={'mais-curtidas'}>Mais curtidas</ItemLista>

                    <ItemLista nomeIcone={'novas'}>Novas</ItemLista>

                    <ItemLista nomeIcone={'surpreenda-me'}>Surpreenda-me</ItemLista>
                </ListaEstilizada>
            </nav>
        </aside>
    )
}