JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mapa">
    <svg version="1.1" id="svg-map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="450px" height="460px" viewBox="0 0 450 460" enable-background="new 0 0 450 460" xml:space="preserve">
        <g>
            <path stroke="#FFFFFF" stroke-width="1.0404" stroke-linecap="round" stroke-linejoin="round" d="M289.558,235.641
        c16.104,0.575,44.973-31.647,44.835-45.259c-0.136-13.612-17.227-58.446-22.349-66.088c-5.122-7.628-37.905,2.506-37.905,2.506
        S234.852,233.695,289.558,235.641z" id="tocantins"></path>
            <text transform="matrix(1 0 0 1 287.0137 188.3208)" fill="#FFFFFF">TO</text>
            <path stroke="#FFFFFF" stroke-width="1.0404" stroke-linecap="round" stroke-linejoin="round" d="M313.276,197.775
        c2.084-2.739,3.506-7.012,6.464-8.764c1.641-0.973,3.232-4.684,4.271-5.163c2.304-1.014,12.161-25.143,20.706-22.513
        c1.095,0.342,29.881,3.478,32.153,7.532c2.246-0.506,17.582-8.804,25.829-4.999c9.172,4.246,11.225,20.679,11.2,20.843
        c0.107,0.328-0.823,5.765-0.985,5.929c-1.15,1-5.258-0.807-4.22,2.138c1.317,3.751,5.094,10.583,9.97,6.613
        c-3.669,6.574-6.846,16.022-13.966,17.747c-5.808,1.411-4.605,13.421-5.178,18.037c-0.465,3.75,0.192,8.448,1.014,12.117
        c1.148,4.959-0.821,8.6-1.808,13.42c-0.822,4.162-0.219,8.299-0.987,12.297c-0.271,1.286-4.407,5.723-5.559,7.148
        c-1.616-1.426-63.952-37.248-73.1-36.265c1.149-3.738,2.438-9.559-0.741-12.723c-8.625-8.572-0.135-19.335-0.162-19.432
        c-0.546-1.725-5.396-6.079-0.026-7.175c-3.175,0.959-1.944-4.027,0.875-3.012C316.726,200.733,314.044,200.527,313.276,197.775z" id="bahia"></path>
            <text transform="matrix(1 0 0 1 359.7324 210.1221)" fill="#FFFFFF">BA</text>
            <path stroke="#FFFFFF" stroke-width="1.0404" stroke-linecap="round" stroke-linejoin="round" d="M408.561,191.735
       ...

CSS

#svg-map path {
    fill:#0094d9
}
#svg-map text {
    fill:#fff;
    font:12px Arial-BoldMT, sans-serif;
    cursor:pointer
}
#svg-map a {
    text-decoration:none
}
#svg-map a:hover {
    cursor:pointer;
    text-decoration:none
}
#svg-map a:hover path {
    fill:#003399 !important
}
#svg-map .circle {
    fill:#66ccff
}
#svg-map a:hover .circle {
    fill:#003399 !important;
    cursor:pointer
}
#info div {
    display: none;
}

JavaScript

i$ = jQuery.noConflict();
var visivel = null;
i$("#mapa path").click(function () {
    //alert('Voce clicou no estado do ' + this.id);
    if (visivel) visivel.hide();
    visivel = i$('[data-name="' + this.id + '"]').show();
});