JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<section>
    <h1> Atualmente a nossa Matriz esta localizada em Minas Gerais e possuímos filiais nos Estados de São Paulo, Goiás, Ceará e Pará. Selecione o Estado abaixo e veja a localização de cada uma de nossas unidades.
    </h1>
    <!-- Renderiza o gráfico -->
    <div id="mapa-do-brasil" style="width: 750px; height: 500px;"></div>
    <div id="detalhes-das-lojas">
        <h2>
            <span id="estado"></span>
        </h2>
        <p>
            <span>Loja: </span><span id="loja"></span>
        </p>
        <p>
            <span>Fone: </span><span id="fone"></span>
        </p>
        <p>    
            <span>Endereço: </span><span id="endereco"></span>
        </p>
    </div>
</section>

CSS

h1 {
    font-family: "Calibri Light", sans-serif;
    color: #333;
}

JavaScript

google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(distribuicaoDasLojasPorEstado);

function distribuicaoDasLojasPorEstado() {

    // Dados do mapa
    var data = google.visualization.arrayToDataTable([
        ['Estado', 'Lojas'],
        ['Minas Gerais', 1],
        ['São Paulo', 1],
        ['Goiás', 1],
        ['Ceará', 1],
        ['Pará', 1]
    ]),
    // Opções do mapa
    options = {
        region: 'BR',
        resolution: 'provinces',
        datalessRegionColor: '#C8F7C5',
        defaultColor: '#cdcdcd',
        enableRegionInteractivity: true,
        legend: 'none'
    },
    // Objeto mapa - SVG, renderizado na DIV de ID #mapa-do-brasil
    mapa = new google.visualization.GeoChart(document.getElementById('mapa-do-brasil'));
    
    // Objeto com as informações das unidades
    unidades = {
    "Minas Gerais" : {
        "Loja": "Matriz - São Sebastião do Paraíso",
        "Fone": "(35) 3539-8150",
        "Endereço" : "Av. Dárcio Cantieri, nº 1750 - Jardim São José - CEP: 37950-000"
    },
    "Ceará": {
        "Loja": "Filial - Fortaleza",
        "Fone": "(85) 3211-6666",
        "Endereço": "Av. Heraclito Graça, nº 395 - Centro - CEP: 60.140-061"
    },
    "São Paulo": {
        "Loja": "Filial - São Paulo",
        "Fone": "(11) 4083-2610",
        "Endereço": "EDIFÍCIO DENVER/Av. Fagundes Filho, nº 145 – CJ 48Vila Monte Alegre - CEP: 04.304-000"
    },
    "Pará": {
        "Loja": "Filial - Belém",
        "Fone": "(91) 3075-5500",
        "Endereço": "Av. Assis de Vasconcelos, nº 488 – Campina - CEP: 66.017-070"
    },
    "Goiás": {
        "Loja": "Filial - Goiânia",
        "Fone": "(62) 3291-5309",
        "Endereço": "Endereço: Rua 29, nº 62- Quadra L18, Lote 14 Setor Oeste - CEP: 74.140-060"
    }
};
    
    // Função para mostrar as informações da loja ao clicar no mapa
    function mostrarDetalhes () {
        // Imprime no console a seguinte frase
        console.log('Executando a...