Поиск адреса или места

import * as sdk from "@umap-llc/map-react";

// HTML: <div id="map" style="height:480px;position:relative"></div>
const map = sdk.createMap({
  container: "map",
  style: "YOUR_STYLE_URL",
  accessToken: "YOUR_ACCESS_TOKEN",
  center: [71.423, 51.128],
  zoom: 14,
});

async function setupExample(map, sdk, report = console.log) {
  const client = map.places;
  const host = document.createElement("div");
  host.style.cssText =
    "position:absolute;top:16px;left:16px;width:300px;max-width:calc(100% - 120px);background:white;padding:14px;border-radius:14px;z-index:5;box-shadow:0 4px 24px #132d4920;font:14px system-ui";
  const input = document.createElement("input");
  input.placeholder = "Название места";
  input.setAttribute("aria-label", "Найти место");
  input.value = "Байтерек";
  input.style.cssText =
    "box-sizing:border-box;width:100%;border:1px solid #dbe3ed;border-radius:10px;padding:12px;font:inherit;outline-color:#1769e0";
  const list = document.createElement("div");
  list.setAttribute("aria-live", "polite");
  host.append(input, list);
  map.getContainer().append(host);
  let marker;
  let timer,
    abort,
    disposed = false;
  const search = async () => {
    abort?.abort();
    abort = new AbortController();
    const current = abort;
    list.replaceChildren();
    if (input.value.trim().length < 2) return;
    try {
      const result = await client.suggest(
        { q: input.value.trim(), city: "astana" },
        { signal: current.signal },
      );
      if (disposed || current.signal.aborted) return;
      if (!result.items.length) {
        list.textContent = "Место не найдено";
        return;
      }
      for (const place of result.items) {
        const button = document.createElement("button");
        button.type = "button";
        button.style.cssText =
          "display:block;border:0;border-radius:8px;background:#f4f7fb;width:100%;text-align:left;padding:12px;margin-top:8px;cursor:pointer;color:#253348;font:inherit";
        button.textContent = place.name;
        button.onclick = () => {
          marker?.remove();
          marker = new sdk.Marker({ color: "#1769e0" })
            .setLngLat(place.coordinates)
            .addTo(map);
          map.flyTo({ center: place.coordinates, zoom: 16, duration: 600 });
          input.value = place.name;
          list.replaceChildren();
          report(place.name);
        };
        list.append(button);
      }
    } catch (error) {
      if (!disposed && !current.signal.aborted)
        list.textContent =
          error instanceof Error ? error.message : "Не удалось найти место";
    }
  };
  input.oninput = () => {
    clearTimeout(timer);
    abort?.abort();
    timer = setTimeout(search, 300);
  };
  await search();
  return () => {
    disposed = true;
    clearTimeout(timer);
    abort?.abort();
    host.remove();
    marker?.remove();
  };
}

map.once("load", async () => {
  const cleanup = await setupExample(map, sdk);
  if (cleanup) map.once("remove", cleanup);
});