How to fix the label on the react yandex map and how to determine the address when moving the map under the label?

Question

JavaScript

There is a map react-yandex-map. Now when you move it, the address label moves after it. It is necessary to fix this mark in the center of the map so that it stands still and the map moves under it. In this case, it is necessary to determine each time the address to which the label points. An example of how it should work is Yandex Taxi.

render() {
    const coordinates = this.props.coords;
    const mapData = {
      center: coordinates,
      zoom: 17,
      behaviors: ["default", "scrollZoom"],
      controls: [],
      yandexMapDisablePoiInteractivity: true,
    };

    const mapOptions = {
      iconLayout: "default#image",
      iconImageHref: mapIcon,
      iconImageSize: [30, 42],
      iconImageOffset: [-3, -42],
    };

    return (
      <YMaps>
        <Map
          defaultState={mapData}
          onLoad={(instance) => this.onLoadMap(instance)}
          modules={["geolocation", "geocode"]}
          instanceRef={this.props.instanceRef}
        >
          {[coordinates].map((coordinate) => (
            <Placemark
              geometry={coordinate}
              key={coordinate}
              options={mapOptions}
            />
          ))}
        </Map>
      </YMaps>
    );
  }

Answer 1

https://yandex.ru/dev/maps/jsbox/2.1/dragger

Answer 2

jsx:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { YMaps, Map } from "react-yandex-maps";

function App() {
  const [maps, setMaps] = useState(null);
  const [address, setAddress] = useState("");

  const getGeoLocation = (e) => {
    let coord = e.get("target").getCenter();

    let resp = maps.geocode(coord);
    resp.then((res) => {
      setAddress(res.geoObjects.get(0).getAddressLine());
    });
  };

  const onLoad = (map) => {
    setMaps(map);
  };

  return (
    <div className="App">
      <div className="center">тут разместить поинтер - указатель центра карты</div>
      <YMaps
        query={{
          apikey: PASTE_APIKEY
        }}
      >
        <Map
          defaultState={{
            center: [55.72506467778052, 37.596457118908944],
            zoom: 16
          }}
          width="500px"
          height="500px"
          onBoundsChange={(ymaps) => getGeoLocation(ymaps)}
          modules={["geolocation", "geocode"]}
          onLoad={(ymaps) => onLoad(ymaps)}
        ></Map>
        {address}
      </YMaps>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);