[Projeto] Minha versão de estilização

Olá, podem me falar oq acharam da forma que fiz ? Agradeço

import styled from 'styled-components';
import tags from './tags.json';
import { useState } from 'react';

const AgrupaTudo = styled.div`
    display: flex;
    align-items: center;
    gap: 20px;
`
const AgrupaBotao = styled.div`
    display: flex;
    gap: 10px;
`
const BotaoEstilizado = styled.button`
    background-color: rgba(217,217,217,0.3);
    border-radius: 10px;
    padding: 10px 8px;  
    font-size: 20px;
    color: #fff;
    box-shadow: none;
    outline: none;
    border-color: ${props => props.$ativo ? '#C98CF1' : 'transparent'};
`
const Tags = () => {

    const[Botao, setBotao] = useState(null)

    const trocarCorBorda = (id) => {
        setBotao(id)
    }
    return(
        <AgrupaTudo>
            <p style={{fontSize:'20px', color:'#fff'}}>Busque por tags:</p>
            <AgrupaBotao>
            {tags.map(tag => <BotaoEstilizado $ativo={tag.id === Botao} key={tag.id} onClick={() => trocarCorBorda(tag.id)}>{tag.titulo}</BotaoEstilizado>)}
            </AgrupaBotao>
        </AgrupaTudo>
    )
}

export default Tags;