How to conditionally/lazy load a component in Qwik JS?

I am currently trying to develop a qwik app. I have a component, which returns a button, and a calender which should only be shown and rendered when this button is hovered. When I try to just import the component at the top of the file and render it like this:
{showCalender.value && < Calender />}
Qwik throws an error, saying that it couldnt resolve a file:
Failed to resolve import “../../calender_component_sqbjiybb91y.js”

But this isnt the file which I am trying to import, so I thought it must be, that qwik cant just render a component in the middle of the program after the main component is rendered.

To fix this, I tried to use a async function which looks like this:

const store = useSignal<any>(null);

const loadAndShowComponent = $(async () => {
    if (!store.value) {
        const module = await import('./calender');
        store.value = module.Calender;
    }
});

This function is then called when the button is hovered like this:

<button id="calenderView" class="mainEl" onMouseEnter$={async () => {
    showCalender.value = true

    loadAndShowComponent();

}} onMouseLeave$={() => {showCalender.value = false}}>
</button>

I expected, that this would fix the problem and import and render the component when the button is hovered, but instead it throwed the same error.

What am I missing? Which concept of qwik applies here?