*_Expected behavior_*Filter within select box properly filters options

*_Actual behavior_*On click of the filter within the select does not allow typing (almost as if it is disabled without the css showing so)

Resources (screenshots, code snippets etc.)

The function shown below is called on jquery document ready event handler.

JavaScript:

function fetchEmployees() {
  return fetch(FETCH + '/generic/employees.php')
    .then((resp) => {
      if (resp.ok) return resp.json();
      else throw new Error("Something went wrong");
    })
    .then((p) => {

      //  puts array into html formatted options
      let employeeOptions = Options.formatOptions(p.map(u => [u.id, [u.first, u.last].join(" ")]),
        'Employee');

      $('#addNewDeliverableEmployee').empty().append(employeeOptions);

      mdb.Select.getInstance(selects.addNewDeliverableEmployee).dispose();

      new mdb.Select(selects.addNewDeliverableEmployee, {
        filter: true
      });

    }).catch((e) => {
      toastr.error(e);
    });
}

HTML:

<div id="addNewDeliverableModal" class="modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Deliverable</h5>
        <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-2">
          <div class="col-2">
            <label class="form-label">Employee</label>
          </div>
          <div class="col">
            <select id="addNewDeliverableEmployee" data-mdb-filter="true" class="select"> </select>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-2">
            <label class="form-label">Sub-project</label>
          </div>
          <div class="col">
            <select id="addNewDeliverableSubproject" data-mdb-filter="true" class="select"></select>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-2">
            <label class="form-label">Deliverable</label>
          </div>
          <div class="col">
            <select id="addNewDeliverableDeliverable" data-mdb-filter="true" class="select"></select>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-2">
            <label class="form-label">Hours</label>
        </div>
          <div class="col">
            <input id="addNewDeliverableHours" class="form-control" type="number" />
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
        Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>

FYI:

• No errors are caught in my function
• I have remade toastr class from mdb 4. I am using mdb 5 (withjquery) to clear confusion.
• removing select class and refreshing does not initiate mdb.Select component but manually calling it does (new mdb.Select) (still without the filter working)