Не работает YMapListener.onUpdate

При перемещении центра карты, изменении масштаба, кликах ни одно из событий не выстреливает, не могу понять почему :(

import { MapEventUpdateHandler, YMapListener, YMapLocationRequest  } from "@yandex/ymaps3-types";
import { YMap, YMapDefaultSchemeLayer} from '@yandex/ymaps3-types';
import { useEffect, useState } from "react";

import {Deck, MapViewState} from '@deck.gl/core';
import {ScatterplotLayer} from '@deck.gl/layers';


const INITIAL_VIEW_STATE: MapViewState = {
    latitude: 37.8,
    longitude: -122.45,
    zoom: 15
};


type DataType = {
    position: [longitude: number, latitude: number];
    color: [r: number, g: number, b: number];
    radius: number;
};

async function initMap(): Promise<YMap> {
    const LOCATION: YMapLocationRequest = {
        center: [37.623082, 55.75254],
        zoom: 9
    };
    const map = new YMap(document.getElementById('yandex-maps')!, { location: LOCATION });
    map.addChild(new YMapDefaultSchemeLayer({}));
    return map;
}

function initDeckGl(): Deck {
    const deckInstance = new Deck({
        initialViewState: INITIAL_VIEW_STATE,
        controller: true,
        layers: [
          new ScatterplotLayer<DataType>({
            data: [
              {position: [-122.45, 37.8], color: [255, 0, 0], radius: 100}
            ],
            getPosition: (d: DataType) => d.position,
            getFillColor: (d: DataType) => d.color,
            getRadius: (d: DataType) => d.radius
          })
        ],
        canvas: document.getElementById('deck-gl-canvas')! as HTMLCanvasElement,
        parent: document.getElementById('deck-gl-container')! as HTMLDivElement,
      });

    return deckInstance;
}

export const MapRR = () => {
    const [deckGlInstance, setDeckGlInstance] = useState<Deck | undefined>(undefined);
    const [yMapInstance, setYMapInstance] = useState<YMap | undefined>(undefined);


    const updateHandler: MapEventUpdateHandler = (object) => {
        console.log('Update object: ', object);
        deckGlInstance?.setProps({
            viewState: {
                latitude: object.location.center[1],
                longitude: object.location.center[0],
                zoom: object.location.zoom - 1,
            }
        })
    };




    useEffect(() => {
        setDeckGlInstance(initDeckGl());
        initMap().then((map) => setYMapInstance(map));
    }, []);

    useEffect(() => {
        if (!deckGlInstance || !yMapInstance){
            return;
        }
        yMapInstance.addChild(
            new YMapListener({
                layer: 'any',
                onUpdate: (z) => console.log('ou',z),
                onClick: (z) => console.log('oc', z),
                onStateChanged: (z) => console.log('zc', z)
            })
        );
    }, [deckGlInstance, yMapInstance]);

    return (
        <div
            id="deck-gl-container"
            style={{
                width: "100vw",
                height: "100vh",
                position: "relative"
            }}
        >
            <div 
                id="yandex-maps" 
                style={{
                    position: "absolute",
                    width: "100%",
                    height: "100%",
                }}
            />
            <canvas id="deck-gl-canvas" 
                style={{
                    pointerEvents: "none"
                }}
            />
        </div>
    );
}


Ответы (2 шт):

Автор решения: YaSupport

Пожалуйста, отправьте пример, который вы составили в jsbin.com или codepen.io, или ссылку на страницу, где мы можем воспроизвести эту ситуацию.

JS API 3.0 работает только с ключами, у которых заполнено поле «Ограничение по HTTP Referer». Поэтому, если вы используете JS API 3.0, нужно внести домены jsbin.com и cdpn.io в список разрешённых.

→ Ссылка
Автор решения: UniqueUlysees

Проблема в useEffect, он создает 2 экземпляра YMap, рисуется первый, а события слушались от второго инстанса. Проблему решает использование метода для очистки представления возвратная функция у useEffect

→ Ссылка