I've faced a quite annoying problem with accesible-autocomlete and can't really find any valid solution for me. What I'm trying to achieve is to show nice autocomplete in overlay just like in any of the examples here: https://alphagov.github.io/accessible-autocomplete/examples/
But my app still prints autocomplete like this: 
My imports:
import { h, Component } from 'preact';
import linkState from 'linkstate';
import axios from 'axios';
import Autocomplete from 'accessible-autocomplete/preact';
My preact component render() method returns this:
<form onSubmit={e => this.submitHandler(e)}>
<div class="form-row mt-2">
<div class="col-6 mb-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-secondary">From</span>
</div>
<input type="date" class="form-control" onInput={linkState(this, 'fromDate')} value={state.fromDate} />
<input type="time" class="form-control" onInput={linkState(this, 'fromTime')} value={state.fromTime} />
</div>
</div>
<div class="col-6 mb-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-secondary">To</span>
</div>
<input type="date" class="form-control" onInput={linkState(this, 'toDate')} value={state.toDate} />
<input type="time" class="form-control" onInput={linkState(this, 'toTime')} value={state.toTime} />
</div>
</div>
</div>
<div class="form-row mt-2">
<div class="col-4">
<div class="form-check">
<input id="errors-only" type="checkbox" class="form-check-input" onChange={linkState(this, 'errorsOnly')} value={state.errorsOnly} />
<label for="errors-only" class="form-check-label">Errors only</label>
</div>
</div>
<div class="col-8">
<div class="input-group">
<div class="input-group-prepend">
<select class="custom-select" onChange={linkState(this, 'supplementalKey')}>
<option></option>
<option value="acronym">Acronym</option>
<option value="document-id">Document number</option>
<option value="nip">NIP</option>
</select>
</div>
<div id="auto-container" role="combobox" aria-expanded="false">
<Autocomplete displayMenu='overlay'
id='autocomplete'
source={this.loadAutocomplete.bind(this)}/>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-12 mb-2">
<div class="input-group">
<button type="submit" class="btn btn-secondary">Search</button>
</div>
</div>
</div>
</form>
And autocomplete component call like this
<Autocomplete displayMenu='overlay'
id='autocomplete'
source={this.loadAutocomplete.bind(this)}/>
What I've already tried is adding another option element={document.querySelector('#auto-container')} What I wanted to try, but don't exactly know how to fit it in, is code written just like in the example in documentation:
I've also tried to move it into other simpler component and out of component altogether but to no avail. Is there something I'm missing? Why my <Autocomplete ... /> is not displaying in overlay mode?