未捕获的错误：无效的挂钩调用。 ReactJs

Question

我是一个相对较新的响应者，我正在尝试在我的网站上呈现一个传单地图，但是我目前收到一个无效的Hook调用错误。任何信息将不胜感激。提前致谢。 下面的代码

import React from "react";
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import styled from 'styled-components';

const Wrapper = styled.div`
    width: ${props => props.width};
    height: ${props => props.height};
`;

export class Map extends React.Component {

    componentDidMount(){
        this.map = L.map('map', {
                center: [58, 16],
                zoom: 6,
                zoomControl: false
        });

        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
            detectRetina: true,
            maxZoom: 20, 
            maxNativeZoom: 17,  
        }).addTo(this.map);
    }

    render() {
        return <Wrapper width="400px" height="400px" id="map"/>
    } 
}

export default Map;