Malaysia States

<svg viewBox="0 0 600 520" aria-label="Map of Malaysia">
  <path data-state="Selangor" d="..." />
  <path data-state="Johor" d="..." />
</svg>
<output id="selected-state">Select a state</output>

svg path {
  fill: #78dce8;
  stroke: #221f22;
  stroke-width: 2;
  transition: fill 160ms ease;
}

svg path:hover,
svg path[aria-pressed="true"] { fill: #ff6188; }

const output = document.querySelector("#selected-state");

document.querySelectorAll("svg [data-state]").forEach(state => {
  state.setAttribute("tabindex", "0");
  state.addEventListener("click", () => {
    output.value = state.dataset.state;
  });
});

No external packages used.