Expected behavior

No country label should be shown when cursor is not hovering a country. I do get the normal behaviour on the bootstrap examples page : https://mdbootstrap.com/docs/standard/plugins/vector-maps/#docsTabsOverview . However it doesn't work this way with my code, although it is just copy-paste from the example.

Actual behavior

After hovering a country, country label is still showing enven when cursor is not hovering any country or is outside the map.

HTML

<div class="vector-map" id="map-1" data-mdb-select-region="CA"></div>
<p class="px-3">Selected: <strong id="map-1-selection">Canada</strong></p>

Javascript

const map = document.getElementById('map-1'); const selectedCountry =                                  document.getElementById('map-1-selection');

map.addEventListener('select', (e) => { selectedCountry.innerText = e.selected ? e.selected.title : '-'; });