Why DashboardCode/BsMultiSelect looks ugly in my app ?

I need to add dropdown to laravel app with bootstrap 5.1, but without jquery as it is not used in my app. I found package https://github.com/DashboardCode/BsMultiSelect and I installed it with npm and in file resources/js/bootstrap.js I added lines :

window._ = require('lodash');

try {
    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


import { createPopper } from "@popperjs/core";
import { ModuleFactory as bsMultiSelectFactory } from "@dashboardcode/bsmultiselect";

const multiSelectEnv = {window, createPopper};
const multiSelect = bsMultiSelectFactory(multiSelectEnv).BsMultiSelect;

window.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("select[multiple]").forEach((select) => {
    multiSelect(select);
  });
});

In blade.php file with select definition :

                    <div class="col-md-4 d-inline-flex justify-content-start align-items-start">
                        <select name="filter_html_block_id[]" id="filter_html_block_id" multiple>
                            <option value=""> - Select all html blocks - </option>
                            @foreach($htmlBlocksSelectionArray as $htmlBlocksSelection )
                                <option value="{{ $htmlBlocksSelection['id'] }}"
                                        @if ( in_array($htmlBlocksSelection['id'], $filter_html_block_id) or count($htmlBlocksSelection) === 0) selected @endif>
                                    {{ $htmlBlocksSelection['name'] }}
                                </option>
                            @endforeach
                        </select>

                        <a class="nav-link link-secondary ml-2" onclick="javascript:filter_html_block_idOnChange()">
                            <i class="bi bi-filter" ></i>
                        </a>

                    </div>

I also added css styles :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dashboardcode/[email protected]/dist/css/BsMultiSelect.min.css">

@section('scripts')
    <script>
        ...

But when page is opened I see : https://prnt.sc/djQonuPc2ZIw

When I click on select input I see : https://prnt.sc/_kp_Uq5MdXz7 In package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    },
    "dependencies": {
        "@dashboardcode/bsmultiselect": "^1.1.18"
    }
}

What is wrong and how can it be fixed ?

Thanks!