Expected behavior Autocomplete should work with HTML and min.js

Actual behavior Not working

Resources (screenshots, code snippets etc.) Material Design for Bootstrap

<br>
<div class="container-fluid">

<div id="basic" class="form-outline">
  <input type="text" id="form11" class="form-control" />
  <label class="form-label" for="form1">Example label</label>
</div>

</div>

<!-- End your project here-->

<!-- MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.0.0/mdb.min.js" integrity="sha512-7HDUKBIUa1tykYCUINFix0eJNScy99DDTEVb+Hy6V82NtrnOaMYK0nf2HA2NFRXLv9CL5BnlXdu9rFvK9cms6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Custom scripts -->
<script type="text/javascript">

  const basicAutocomplete = document.querySelector('#basic');
  const data = ['One', 'Two', 'Three', 'Four', 'Five'];
  const dataFilter = (value) => {
    return data.filter((item) => {
      return item.toLowerCase().startsWith(value.toLowerCase());
    });
  };

  new mdb.Autocomplete(basicAutocomplete, {
    filter: dataFilter
  });

</script>