O comportamento que você descreve pode estar relacionado ao gerenciamento de eventos no React. Quando você adiciona o evento onClick diretamente ao componente BotaoPrincipal, o evento é tratado pelo próprio componente e não pela div que o envolve.
Se o componente BotaoPrincipal não está configurado para passar o evento para seus elementos filhos ou não está configurado para lidar com eventos personalizados, o evento pode não ser propagado corretamente.
Quando você adiciona o evento diretamente à div, está garantindo que o evento seja capturado na div e, assim, é possível garantir que a função navegacao(-1) seja chamada corretamente.
Para que o primeiro código funcione corretamente, você pode verificar se o componente BotaoPrincipal está configurado para lidar com eventos ou se há alguma propriedade específica que permite passar eventos para os elementos internos.
Outra alternativa seria envolver o componente BotaoPrincipal em um elemento que suporte eventos, como um div ou span, e adicionar o onClick a esse elemento:
<div className={styles.botaoContainer} onClick={() => navegacao(-1)}>
<BotaoPrincipal tamanho={'lg'}>
Voltar
</BotaoPrincipal>
</div>
Isso garantirá que o evento seja capturado pelo elemento envolvente, mesmo que o componente interno não o suporte diretamente. Certifique-se de que o elemento envolvente não tenha estilos ou comportamentos indesejados que possam interferir na aparência ou funcionalidade do botão.
