MDBootstrap Select CSS causing conflict with existing CSS

I'm trying to have MDBootstrap's Bootstrap Select for dropdown choices on my site and have been following instructions listed here:

https://mdbootstrap.com/javascript/material-select/

Here is the code I'm using to get the dropdown select.

<select class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label>

The instructions on that page also said to insert this JS snippet
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').material_select();
});

But when I render the page I get:

Deferred exception: $(...).material_select is not a function

So I added material.js and material.css in my page and this messes up the mdbootstrap CSS and JS files and causes buttons to change color, layout to change among other issues. If I don't include the materialize.css and JS files, the dropdown select will not work. Can you please help me with this?

I'm using these versions:

1. bootstrap.min.css – 4.0.0

2. mdb.min.css – 4.4.1

3. jquery.min.js – 3.2.1

4. bootstrap.min.js – 4.0.0

5. mdb.min.js – 4.4.1