JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<div>
    <button id="btnBrowse" class="button primary on-right" onclick="openFileOption();">Browse</button>
</div>
<div class="custom-file">
    <input type="file" id="file"  name="files"  onchange="uploadPhoto();" />
</div>
<div id="base" style="display:none"></div>

<div id="map" style="width: 100%; height: 400px"></div>

CSS

#file
{
    display:none;
}

JavaScript

var mapLoadCount = 0;
    var map;
    var overlay;
    var bounds;

    function LoadMap() {
        mapLoadCount = mapLoadCount + 1;
        if (mapLoadCount == 1) {
            map = L.map('map', {
                minZoom: 1,
                maxZoom: 5,
                center: [0, 0],
                zoom: 3,
                crs: L.CRS.Simple
            }).setView([50.4333, 30.5167], 3);

            var w = 1526,
            h = 626,
            url = '';

            var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
            var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
            bounds = new L.LatLngBounds(southWest, northEast);

            overlay = L.imageOverlay(url, bounds);
            overlay.addTo(map);

            map.setMaxBounds(bounds);
        }
    }

    function onMapClick(e) {
        var newPosition = e.latlng;

        if (imageBounds.contains(newPosition)) {
            var newMarker = L.marker(newPosition).addTo(map);
        }

    }

    function ChangeMap(_url) {

        LoadMap();

        overlay.setUrl(_url)
        var popup = L.popup();

        var imageBounds = bounds;

        function onMapClick(e) {
            var newPosition = e.latlng;

            if (imageBounds.contains(newPosition)) {
                var newMarker = L.marker(newPosition).addTo(map);
            }
        }

        newMarkerGroup = new L.LayerGroup();
        map.on('click', onMapClick);

        map.on('drag', function () {
            map.panInsideBounds(bounds, { animate: false });
        });
    }



    function readImage(input) {
        if (input.files && input.files[0]) {
            var FR = new FileReader();
            FR.onload = function (e) {
                $('#base').text(e.target.result);
            };
            FR.readAsDataURL(input.files[0]);
        }
    }

    function openFileOption() {
        $("#file").click();
    }

    function uploadPhoto() {

        var path =...