Подключение Яндекс Карты (API 3) к проекту Next.js (App Router)

"use client";
 
import Script from "next/script";
 
const apikey = "yandex-map-api-key";
 
const createMap = async () => {
  await ymaps3.ready;
 
  const { YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker } =
    ymaps3;
 
  const coordinates = [37.603505, 55.73775];
 
  const map = new YMap(document.querySelector("#map"), {
    location: {
      center: coordinates,
      zoom: 16,
    },
    behaviors: ["drag"],
  });
 
  map.addChild(new YMapDefaultSchemeLayer());
  map.addChild(new YMapDefaultFeaturesLayer());
 
  const marker = document.querySelector("#marker");
  map.addChild(new YMapMarker({ coordinates: coordinates }, marker));
  marker.classList.remove("hidden");
};
 
export function Map() {
  return (
    <>
      <Script
        src={`https://api-maps.yandex.ru/v3/?apikey=${apikey}&lang=ru_RU`}
        strategy="lazyOnload"
        onLoad={createMap}
      />
 
      <section id="map" className="w-full h-112"></section>
 
      <div id="marker" className="hidden chat chat-start">
        <div className="chat-bubble w-40 text-sm">Наименование маркера</div>
      </div>
    </>
  );
}

import { Map } from "@/app/lib/map";
 
export default function Page() {
  return (
    <main>
      // ...
      <Map />
      // ...
    </main>
  );
}