Кнопка карты листовки в полноэкранном режиме работает плохо (нужно дважды щелкнуть)

Question

Я хочу сделать карту больше, но мне не нужен полноэкранный режим (потому что мне нужно видеть панель задач). Мне нужно дважды щелкнуть, чтобы обновить карту с маленькой на большую и с большой на маленькую карту. И я не могу поставить e.preventDefault (), потому что у меня есть ошибка: «e.prevenDefault не является функцией. Я добавляю свой код: COMPONENT

import React, { useEffect } from "react";
import L from "leaflet";
import 'react-map-fullscreen'
import './map.css'


function Map2() {

    let map;
    let url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}'
    const access = 'pk.eyJ1Ijoiam9zZXQyMSIsImEiOiJjazF1bGZlcHowYjVlM2RwYW9ia2pwaWtlIn0.9n-6tKArfdSfd15Do6YxLA'

    useEffect(() => {
        map = L.map("map");
        const defaultCenter = [41.383, 2.173];
        const defaultZoom = 13.10;
        const fullscreenControl = true;
        let layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1Ijoiam9zZXQyMSIsImEiOiJjazF1bGZlcHowYjVlM2RwYW9ia2pwaWtlIn0.9n-6tKArfdSfd15Do6YxLA'
        });

        map.setView(defaultCenter, defaultZoom);
        layer.addTo(map);
        map.on('enterFullscreen', function() {
        const element = document.getElementById("map");
                element.classList.toggle("fullscreen");
                console.log('entered fullscreen');

          });

        L.control.fullscreen({
            content: null, 
            forceSeparateButton: true, 
            forcePseudoFullscreen: true, 
            fullscreenElement: false 
       }).addTo(map);

        function setBasemap(basemap) {
            if (layer) {
                map.removeLayer(layer);
            }
            layer = L.tileLayer(url, {
                id: basemap,
                accessToken: access
            });
            map.addLayer(layer);
        }

        document.querySelector('#basemaps')
        document.addEventListener('change', function (e) {
            e.preventDefault()
            var basemap = e.target.value;
            setBasemap(basemap);
        });

    }, [map])

     document.addEventListener("keyup", function (event) {
        if (event.keyCode === 27) {
            document.getElementById("map").classList.remove("fullscreen");
        }
    });

    if (document.addEventListener) {
        document.addEventListener('webkitfullscreenchange', exitHandler, false);
        document.addEventListener('mozfullscreenchange', exitHandler, false);
        document.addEventListener('fullscreenchange', exitHandler, false);
        document.addEventListener('MSFullscreenChange', exitHandler, false);
    }

    function exitHandler() {
        if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            const mymap = document.getElementById("myDivId");
            mymap.classList.remove("fullscreen");
        }
    }
    return (<>
        <div className="container">
            <div>
                <div id="map" className="normalscreen"></div>
                < fullscreenControl />
            </div>
            <div id="basemaps-wrapper" className="leaflet-bar">
                <select id="basemaps">
                    <option>Visualització</option>
                    <option value="mapbox.streets">Streets</option>
                    <option value="mapbox.satellite">Satellite</option>
                    <option value="mapbox.outdoors">Outdoors</option>
                    <option value="mapbox.dark">Dark</option>
                    <option value="mapbox.light">Light</option>
                    <option value="mapbox.DarkGray">Dark Gray</option>
                </select>                
            </div>
        </div>
    </>)
}
export default Map2

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  justify-content: center;
}

#map {
  display: block;
}

.normalscreen {
  width: 50%;
  height: 50vh;
  left: 49%;
  position: relative;
}

.fullscreen {
  width: 100%;
  height: 80vh;
  left: 0%;
  text-align: center;
}

APP

import { withRouter } from 'react-router-dom'
import Navbar from './Navbar'
import Map2 from './Map2'
function App() {

  return (<>
    <Navbar />
    <Map2 />
</>);
}
export default withRouter(App)