react-leaflet hides a drop down menu - reactjs

Question

React-leaflet when i introduce a drop down menu at top, its hidden behind the map when i drop it down. Any help will be appreciated. Below is a screen shoot of how its rendering on my front
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'
const position = [-0.29008, 3.81987]
class App extends Component {
render() {
return (
<div>
<div className='form-row'>
<div className='form-group col-md-12'>
<Select
placeholder='Search a single Fleet'
options={[{ value: 'clear', label: 'Clear Search' }, ...options]}
key={'show'}
onChange={(e) => {
if (e.value === 'clear') setTheVehicle(undefined)
else setTheVehicle(e.value)
}}
/>
</div>
</div>
<Map center={position} zoom={13}>
<TileLayer
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
attribution='© OpenStreetMap contributors'
/>
<Marker position={this.state.center}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</Map>
</div>
);
}
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Answer 1

Rather little lazy answer but took me ages :
Check new style on first <div>
<div className='form-row' style={{position: 'relative', z-index: 999}}>
<div className='form-group col-md-12'>
<Select
placeholder='Search a single Fleet'
options={[{ value: 'clear', label: 'Clear Search' }, ...options]}
key={'show'}
onChange={(e) => {
if (e.value === 'clear') setTheVehicle(undefined)
else setTheVehicle(e.value)
}}
/>
</div>
</div>