#react-select Create a country flag dropdown using react-select

I am unable to insert images through classname in select options. I need a country flag dropdown like:


but i want to achieve this through react-select. Also I have seen one example in which you have mentioned about gravatar but that is in es5 and in es6 classes we are not being able to achieve that. The css is being messed up when we pass className in option object of options array.

CSS used for options:

.flag {
    display: inline-block;
    width: 25px;
    height: 15px;
    background: url('Images/flags.png') no-repeat;
    position: relative;
    top: 2px;

.flag.flag-US {
    background-position: -325px 0;

Render Method:

 render () {
            const props = {
                name: 'mdt-select',
                disabled: false,
                placeholder: 'Select ',
                labelKey: 'name',
                options: [{id: '1', name: '+91', className: 'flag flag-US'},{id: '2', name: '+92',  className: 'flag flag-US'},{id: '3', name: '+93',  className: 'flag flag-US'},{id: '4', name: '+94',  className: 'flag flag-US'}],
                clearable: true,
                matchPos: 'any',
                searchable: true,
                errorMessage: 'Please make selection',
                value: '',
            return (
                <div >
                    <ReactSelect {...props}/>
               </div >


Messed Up CSS snapshot in react select option