Mapbox search bar doesent load location - leaflet

Question

I have 2 toolbars in my scrpit one to add markers and another one to search locations but when i had both in the scrpit the location bar stop fiding location can you tell me why ? i am new at leaflet and mapbox
<style>
#geocoder-container {
position: absolute;
top: 0;
width: 100%;
margin-top: 10px;
}
#geocoder-container > div {
min-width:50%;
margin-left:25%;
}
</style>
<div id='map'></div>
<div id='geocoder-container'></div>
<script>
<!-- MAP Feature-->
L.mapbox.accessToken = 'pk.eyJ1Ijoib2JlY2VuZSIsImEiOiJjaXNicjdja3kwMDE3MnBvMGppMWpubDBqIn0.L4r0u_Em0utvCuFmqbsWQw';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([38.89399, -77.03659], 17);
var featureGroup = L.featureGroup().addTo(map);
<!-- MAP Feature-->
<!-- Tolbar eddit -->
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
}
}).addTo(map);
map.on('draw:created', function(e) {
featureGroup.addLayer(e.layer);
});
var geocoder = new mapboxgl.Geocoder({
container: 'geocoder-container'
});
map.addControl(geocoder);
</script>
</body>
</html>