Listings Derflinger/SVG mit React

Listing 1: Overpass-QL-Abfrage der Berliner Bezirke
[out:json][timeout:25];
{{geocodeArea:Berlin}}->.searchArea;
    (
    // query part for: "boundary=administrative and admin_level=9"
    node["boundary"="administrative"]["admin_level"="9"](area.searchArea);
    way["boundary"="administrative"]["admin_level"="9"](area.searchArea);
    relation["boundary"="administrative"]["admin_level"="9"](area.searchArea);
);
// print results
out body;
>;
out skel qt;

-----

Listing 2: Die Anwendung mit Funktionskomponente und eingefügter SVG-Datei
import React from "react";
import styled from "@emotion/styled";

function BerlinMap(props) {
    const handleMouseOver = (evt) => {
      for (const attr of evt.target.attributes) {
        if (attr.name === "name") {
          props.callback(attr.value);
        }
      }
    };
    return (
      <>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          id="svg626"
          viewBox="0 0 3001.18 2470"
          version="1.1"
          style={{ width: "50%" }}
        >
          <defs id="defs630" />
          <g id="g624">
            <Borough
              id="path598"
              d="m 575.41788,646.71475 -4.2765,12.94153 -2.30212,3.5527 -2.4876,3.44405 -0.83693,3.14533 0.15517,3.36692 1.00458,2.55306 1.38493,1.90799 1.83438,2.20371 4.82182,4.28924 2.10949,3.35063 1.67163,3.41958 1.00726,3.61913 -1.2846,9.32649 -0.22294,8.49046 3.96037,10.2116 2.79393,3.71342 4.05623,5.07077 
  ...
 3.29064,6.03348 1.75457,7.10791 -1.68679,6.8105 -3.12522,10.42868 z"
              name="Reinickendorf"
              onMouseOver={handleMouseOver}
            />
[...]
</g>
        </svg>
      </>
    );
}

const Borough = styled.path`
    fill: #000080;
    stroke: yellow;
    :hover {
      fill: red;
    }
`;

-----

Listing 3: Status der Variablen borough festlegen
import React, { useState } from "react";
import BerlinMap from "./components/BerlinMap/BerlinMap";
import styled from "@emotion/styled";

function App() {
    const [borough, setBorough] = useState("");

    const handleBorough = (name) => {
      setBorough(name);
    };

    return (
      <>
        <Container>
          <h1>Berliner Bezirke</h1>
          <BerlinMap callback={handleBorough} />
          <h1>{borough}</h1>
        </Container>
      </>
    );
}

const Container = styled.div`
    margin-left: auto;
    margin-right: auto;
    width: 800px;
`;

export default App;