The example in the document encounters an error.

[Wec4Dre96]

`import React, { useState, useReducer, useRef } from "react";
import ReactMapGL, { Layer, Source } from "react-map-gl";
import { createGlobalStyle } from "styled-components";
import { MarkerLayer, MarkersDisplay } from "../components";
import {
MAPBOX_TOKEN,
SingleMarkerProps,
ViewportType,
COMPANY_TENANT,
CLIENT_TENANT,
} from "../common";
import { markersReducer, markersInitialState } from "../store";
import "antd/dist/antd.css";

const GlobalStyle = createGlobalStyle::-webkit-scrollbar { display: none !important; } body { overflow: hidden; width: 100% !important; };
const geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: { type: "Point", coordinates: [-122.4, 37.8] },
},
],
};

const layerStyle = {
id: "point",
type: "circle",
paint: {
"circle-radius": 10,
"circle-color": "#007cbf",
},
};
const MapLayer = () => {
const [viewport, setViewport] = useState({
width: 400,
height: 400,
latitude: 39.87523429950629,
longitude: 116.47133481200402,
zoom: 14,
});
const [totalMarkers, markersDispatch] = useReducer(
markersReducer,
markersInitialState
);

const mapRef = useRef(null);
const handleViewportChange = (mk: SingleMarkerProps) => {
setViewport({
...viewport,
latitude: mk.latitude,
longitude: mk.longitude,
});
};

const map = mapRef?.current?.getMap();

return (
<>
<ReactMapGL
{...viewport}
width="100vw"
height="100vh"
mapboxApiAccessToken={MAPBOX_TOKEN}
onViewportChange={setViewport}
>

<Layer {...layerStyle} />


</>
);
};

export default MapLayer;
`

Here is the code I copied from the "Source" part of document.
But there are always some errors, "Layer" in the same situation.

[Wec4Dre96]

This way is Ok, but still has some errors about parameters mismatching.

[Wec4Dre96]

Destructuring assignment is not allowed ?

<Layer {...layerProps} // id="route2" // type="line" // source="my-data" // paint={{ // "line-color": "#abcccc", // "line-width": 4, // }} // layout={{ // "line-join": "round", // "line-cap": "round", // }} />