MDB Select has two dropdown carets and selection is misalign

I just downloaded the latest MDB Pro library 4.6.1 and I am using the Bootstrap.css and .js files which are zipped up with it (4.1.3). 

Here is the code I am using: This as blade code from Laravel but produces the correct values:

<select class="mdb-select md-form" id="cam-model">
    <option value="" disabled selected>Select Camera Model</option>
    @foreach($models as $model)
        <option value="{{ $model->model }}" data-icon="{{ $model->photoUrl() }}" class="camera-icon">
            {{ $model->description }} by {{ $model->vendor->vendor_name }}
        </option>
    @endforeach
</select>

and I use the document initialization javascript:

$(document).ready(function() {
    $('.mdb-select').materialSelect();
});

So when the page/select first appears the default selected text is correctly left justified, 
however it has two dropdown carets on the right.
When I dropdown the selection and select the option I want, the text for that option is showing but has some strange alignment like it is right justified or something.