Bootstrap multiselect with Thymeleaf

Question

I have a Spring Boot application using Thymeleaf and Bootstrap. I am using webjars to get Bootstrap 4. I want to implement a drop down list with checkboxes for each option.

I referred to this thread but it did not help (How to implement Multi Select Drop Down with checkbox in Thymeleaf and display selected values to Spring controller)

The code which I implemented is as follows.

<div class="form-group">
    <label >Select dips</label>
    <select class="form-control selectpicker" 
            th:field="*{furtherUnits}"  
            multiple="multiple">

        <option th:each="unit : ${units}"
                th:value="${unit.id}"  >
            <input type="checkbox" 
                   th:value="${unit.id}" 
                   th:text="${unit.description}" >
        </option>

    </select>
</div>

The units is a list which is sent from the controller. The user should have the option to select more than one unit using the dropdown list with checkbox.

The headers and links in the HTML are as follows:

<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<script th:src="@{/webjars/popper.js/umd/popper.js}" type="text/javascript"></script>
<script th:src="@{/webjars/jquery/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}" type="text/javascript"></script>

By using the above code I get just the list which is just scrollable as follows.

I am new to front-end development. Could some suggest where I am doing wrong?