ReactJS onClick показать пользовательский интерфейс

Question

У меня есть страница карты reactJS, на которой я хочу отображать компонент пользовательского интерфейса в верхнем левом углу, когда я нажимаю маркер на карте. Я пробую две вещи.

• Получение данных из бэкэнда NodeJS и отображение маркера. Я хочу либо жестко закодировать div для каждого полученного данных, чтобы отображать информацию о маркере клика
• Отображать пользовательский интерфейс, когда я нажимаю на маркер.

Сейчас у меня есть кнопка под страница, на которой я нажимаю новый интерфейс, добавляется, но не при нажатии маркера. Как этого добиться?

import React from "react";
import {
  GoogleMap,
  useLoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";
import mapStyles from "./../../mapStyles";  
import "./BookEvent.scss";
import { render } from "node-sass";

// import { formatRelative } fr

const libraries = ["places"];
const mapContainerStyle = {
  width: "100%",
  height: "100vh",
};

const center = {
  lat: 51.103807,
  lng: 10.057477,
};

const options = {
  styles: mapStyles,
  mapTypeControl: false,
  fullscreenControl: false,
  streetViewControl: false,
};

function getData(){
  var mymap = new window.google.maps.Map(document.getElementById("mymap"), {zoom:6, center: center});
  var num=0;
  fetch("http://localhost:4440/map")
  .then(data => data.json())
  .then(data => data.map(x => { 
    var marker = new window.google.maps.Marker({
      position:  new window.google.maps.LatLng(x.lat,x.lng),
      map: mymap,
    });
    num+=1;

    var mydiv = document.createElement('div');
    // mydiv.className = 'hideInitially';
    var DName = document.createElement('h3');
    DName.textContent = x.d_name1;
    var DAddr = document.createElement('h5');
    DAddr.textContent = x.d_strasse+ ", " + x.d_plz + ", "+ x.d_ort + ", " + x.bundesland;
    var DPhone = document.createElement('h5');
    DPhone.textContent = x.hdl_telefon;
    mydiv.append(DName);
    mydiv.append(DAddr);
    mydiv.append(DPhone);

    var mainDiv = document.getElementsByClassName('dealer-box');
    alert(mainDiv);
    mainDiv.append(mydiv);
    // <h3>d Name</h3>
    // <h5>d address</h5>
    // <h5>d phone</h5>
    console.log(x);
}))
  .catch(console.log);
  
}


export default function BookEvent() {

  
  const [marker, setMarker] = React.useState(null);
  const [showResults, setShowResults] = React.useState(false);


  const onClick = () => {
    setShowResults(true);
  }
  

  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_KEY,
    libraries,
  });

  if (loadError) return "error loading maps";
  if (!isLoaded) return "loading maps";

  return (
    <div>
      <GoogleMap
      id='mymap'
        mapContainerStyle={mapContainerStyle}
        zoom={6}
        center={{ lat: 50.115509, lng: 8.690508 }}
        options={options}
      >
        <Marker
          position={{ lat: 51.081753, lng: 13.696073 }}
          // lat: 51.081753, lng: 13.696073
          onClick={() => {
            render(
              <div className="d-box">
              { showResults ? (
              <h1>Dealer name</h1>  
              ) : null }
               </div>
            )
          }}
          // onClick={() => {
          //   setMarker(center);
          //   console.log("marker clicked");
          
          // }}
        ></Marker>
        {marker ? (
          <InfoWindow
            position={{
              lat: 51.081753,
              lng: 13.696073,
              // lat: 51.081753,
              // lng: 13.696073,
            }}
            onCloseClick={() => {
              marker(null);
              
            }}
          >
            <div>
              <h3>Some text</h3>
              <h4>Some text</h4>
              <p>Some text</p>
            </div>
          </InfoWindow>
        ) : null}
      </GoogleMap>
      <div>here here</div>
      <div id="test">
      {/* <input type="submit" onClick={getData} value='Click here'/> */}
      <input type="submit" onClick={onClick} value='Click here'/>
   
      </div>
      <div>calender booking</div>
    </div>
  );
}