Select input doesn't get 'required' attribute

Expected behavior When I add attribute 'required' to a select I expect to have that attribute appear on the tag that my tag is transformed to.

Actual behavior That doesn't happen, thus my select neither prevents my form from submitting nor shows a popup ('invalid element' error appears in console)

Resources (screenshots, code snippets etc.) I use such code to initialise all my selects:

<select class="select-input" id="...." name="...." required="required">
    <option disabled>Please select something</option>
    <option>...</option>
</select>
<!-- label etc -->

<script>
    function getDefaultSelectProps() {
        return {
            noResultText: 'Ничего не найдено./Nothing found.',
            searchPlaceholder: 'Искать/Search...',
            optionsSelectedLabel: 'Выбрано/selected',
            selectAllLabel: 'Выбрать все/Select all',
            visibleOptions: 7,
            optionHeight: 44
        };
    }

    $(document).ready( function() {
        const selects = document.querySelectorAll('.select-input');
        selects.forEach( element => {
            let props = getDefaultSelectProps();
            if ( element.getAttribute( "data-mdb-filter" ) === true || element.getAttribute( "data-mdb-filter" ) === 'true' ) {
                props.filter = true;
            }
            const simpleSelect = new mdb.Select( element, props);
            if ( element.id != null ) {
                //some custom logic for click handling
            }
        } )
    } )
</script>

which for whatever reason gets transformed to something like this:

<div id="select-wrapper-12345" class="select-wrapper">
    <div class="form-outline>
        <input class="form-control select-input active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly>
        <!-- label, select-arrow, form-notch -->
    </div>
    <select class="select-input select-initialized" required>
        <!-- my select -->
    </select>
</div>

which is not in any way required from the default browser form