Minha solução para o desafio

Segue meu componente:

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

const ContainerTags = styled.div`
    display: flex;
    margin-block: 66px 48px;
    font-size: 18px;
    gap: 48px;
`

const ListaTags = styled.div`
    list-style: none;
    display: flex;
    flex-direction: row-reverse;
    gap: 24px
`

const BotaoWrapper = styled.div`
    border-radius: 25%;
    background: ${props => props.$ativo
        ? 'linear-gradient(90deg, #C98CF1 0%, #7B78E5 100%)'
        : '#43566e'
    }
`

const BotaoTag = styled.button`
    border-radius: 25%;
    background: #43566e;
    padding: 8px;
    margin: 2px;
`

export default function Tags({ ativo = false }) {
    
    const [idTagSelecionada, SetIdTagSelecionada] = useState(null)

    function escolherTag(id) {
        SetIdTagSelecionada(id)
    }

    return (
        <ContainerTags>
            <p>Busque por tags:</p>
            <ListaTags>
                {tags.map(tag => (
                    <BotaoWrapper
                        key={tag.id}
                        onClick={() => escolherTag(tag.id)}
                        $ativo={tag.id === idTagSelecionada}
                    >
                        <BotaoTag>{tag.titulo}</BotaoTag>
                    </BotaoWrapper>
                ))} 
            </ListaTags>           
        </ContainerTags>
    )
}