Uncaught Error: Неверный вызов ловушки. ReactJs

Question

Я относительно новичок, чтобы реагировать, и я пытаюсь отобразить карту листовки на своем сайте, но в настоящее время я получаю ошибку вызова Invalid 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;