Почему не совпадает слой с маркером

Question

Я пытаюсь переместить маркер и обнаруживаю слой с идентификатором "pipe", установленным в новой позиции. Но при перемещении маркер масштабирование не совпадает.

Я использую react-map-gl и kepler.gl с маркером из react-map-gl с машинописным текстом.

Это потому, что я добавляю слой с помощью kepler.gl ???

Это потому, что слой трубы рисует только один раз?

Почему не совпадает ??

export class SettingsMap extends React.PureComponent<
    Readonly<
        ISettingsMapProps &
            InteractiveMapProps &
            WrappedComponentProps & { children?: ReactNode }
    >,
    ISettingsMapState
> {
    mapRef: React.RefObject<InteractiveMap> = React.createRef<InteractiveMap>();
    timeout: ReturnType<typeof setTimeout> = setTimeout(() => "", 1000);

    constructor(
        props: Readonly<
            ISettingsMapProps &
                InteractiveMapProps &
                WrappedComponentProps & { children?: ReactNode }
        >
    ) {
        super(props);
        this.state = {
            viewport: {
                width: 100,
                height: 100,
                latitude: 39.46975,
                longitude: -0.37739,
                zoom: 14,
                pitch: 0,
            },
            mapGL: undefined,
            flowmeters: [],
        };
    }

    componentWillUnmount(): void {
        clearTimeout(this.timeout);
    }

    componentDidUpdate(prevProps: any): void {
        if (prevProps.showModal !== this.props.showModal) {
            const { viewport } = this.state;
            const updatedViewport: IViewport = Object.assign({}, viewport, {
                latitude: 39.46181,
                longitude: -0.33942354,
                zoom: 17,
            });
            this.timeout = setTimeout(() => {
                this.setState({
                    viewport: updatedViewport,
                    flowmeters: this.props.flowmeters,
                });
            }, 1000);
        }
    }

    handleLoad = (event: MapLoadEvent): void => {
        const loaded: boolean = event.target.loaded();
        const mapGL = this.mapRef.current;
        if (this.props.onSetLoaded) {
            this.props.onSetLoaded(loaded, mapGL);
        }
        if (mapGL !== null) {
            this.setState({ mapGL: mapGL });
        }
    };

    onClickedFlowmeter = (flowmeter: IFlowMeter): void => {
        const { flowmeters } = this.state;
        const newArray: Array<IFlowMeter> = updateFlowMeterMenu(
            flowmeter,
            flowmeters,
            true
        );
        this.setState({ flowmeters: newArray });
    };

    onUpdateFlowMeter = (flowmeters: Array<IFlowMeter>): void => {
        this.setState({ flowmeters: flowmeters });
    };

    onDragEnd = (event: IDragEvent, flowmeter: IFlowMeter) => {
        const point: [number, number] = [event?.center?.x, event?.center?.y];
        if (!this.getFeatures(point)) return;
        const lngLat: number[] = event.lngLat;
        const { flowmeters } = this.state;
        const newArray: Array<IFlowMeter> = flowMeterUpdatePosition(
            lngLat,
            flowmeter,
            flowmeters
        );
        this.setState({ flowmeters: newArray });
    };

    getFeatures = (point: [number, number]) => {
        const { mapGL } = this.state;
        const features:
            | mapboxgl.MapboxGeoJSONFeature[]
            | undefined = mapGL?.getMap().queryRenderedFeatures(point);
        const feature:
            | mapboxgl.MapboxGeoJSONFeature
            | undefined = features?.find(
            feature => feature.layer.id === MOCKED_LAYER_ID
        );
        console.log("feature: ", feature);
        return feature ? true : false;
    };

    render() {
        const { theme, children, showModal } = this.props;
        const { width, height } = this.props;
        const { viewport, flowmeters } = this.state;
        const mapStyle: string = theme === "dark" ? darkTheme : lightTheme;
        return (
            <div className="dma-map__wrapper">
                <InteractiveMap
                    {...viewport}
                    ref={this.mapRef}
                    className="mapbox"
                    width={width}
                    height={height}
                    mapStyle={mapStyle}
                    preserveDrawingBuffer={true}
                    attributionControl={false}
                    onLoad={this.handleLoad}
                    onViewportChange={(viewport: ViewportProps) => {
                        viewport.width = 100;
                        viewport.height = 100;
                        this.setState({ viewport });
                    }}
                    interactiveLayerIds={[MOCKED_LAYER_ID]}
                >
                    {!showModal && children}
                    {!showModal && <Layer {...pipeVectorLayer} />}
                    {!showModal &&
                        flowmeters &&
                        flowmeters.length > 0 &&
                        flowmeters.map(
                            (flowmeter: IFlowMeter, index: number) => {
                                return (
                                    <div
                                        className="flowmeter-marker-compose"
                                        key={index}
                                        onDoubleClick={() =>
                                            this.onClickedFlowmeter(flowmeter)
                                        }
                                    >
                                        <Marker
                                            className="flowmeter-marker"
                                            draggable={flowmeter.draggable}
                                            latitude={flowmeter.latitude}
                                            longitude={flowmeter.longitude}
                                            onDragEnd={(event: any) =>
                                                this.onDragEnd(event, flowmeter)
                                            }
                                        >
                                            {flowmeter && flowmeter.menu && (
                                                <FlowMeterMenu
                                                    theme={theme}
                                                    flowmeter={flowmeter}
                                                    flowmeters={flowmeters}
                                                    onUpdateFlowMeter={
                                                        this.onUpdateFlowMeter
                                                    }
                                                />
                                            )}

                                            {theme === "dark" ? (
                                                <FlowMiterDarkIcon />
                                            ) : (
                                                <FlowMiterLightIcon />
                                            )}
                                        </Marker>
                                    </div>
                                );
                            }
                        )}
                </InteractiveMap>
            </div>
        );
    }
}

export default injectIntl(SettingsMap);