Nuxt UI 3 useOverlay() not showing modals

<script setup lang="ts">
import { LoginModal, RegisterModal, SubmitProductModal } from '#components';

const query = ref('');
const overlay = useOverlay();

const loginModal = overlay.create(LoginModal);
const registerModal = overlay.create(RegisterModal);
const submitProductModal = overlay.create(SubmitProductModal);

const showLoginModal = () => {
  loginModal.open();
};

const showRegisterModal = () => {
  registerModal.open();
};

const showSubmitProductModal = () => {
  submitProductModal.open();
};
</script>

<template>
<header class="h-[60px] flex items-center justify-between gap-5">
  <h1 class="text-2xl font-semibold">
    <NuxtLink to="/">MySite</NuxtLink>
  </h1>
  
  <UInput
    v-model="query"
    icon="lucide:search"
    placeholder="Search products or categories..."
    class="w-full"
    size="lg"
    :ui="{ trailing: '-mr-1.5' }">
    <template v-if="query?.length" #trailing>
      <UButton
        color="neutral"
        variant="ghost"
        size="sm"
        :ui="{ leadingIcon: '!size-4' }"
        class="rounded-full"
        icon="lucide:x"
        aria-label="Clear input"
        @click="query = ''" />
    </template>
  </UInput>
  
  <div class="flex items-center gap-2">
    <UButton
      size="lg"
      color="neutral"
      variant="soft"
      icon="lucide:upload"
      label="Submit Product"
      @click="showSubmitProductModal" />
    <UButton
      size="lg"
      color="neutral"
      variant="outline"
      icon="lucide:log-in"
      label="Login"
      @click="showLoginModal" />
    <UButton
      icon="lucide:user-plus"
      label="Sign Up"
      size="lg"
      @click="showRegisterModal" />
  </div>
</header>
</template>

<script setup lang="ts">
import { LoginModal, RegisterModal, SubmitProductModal } from '#components';

const query = ref('');
const overlay = useOverlay();

const loginModal = overlay.create(LoginModal);
const registerModal = overlay.create(RegisterModal);
const submitProductModal = overlay.create(SubmitProductModal);

const showLoginModal = () => {
  loginModal.open();
};

const showRegisterModal = () => {
  registerModal.open();
};

const showSubmitProductModal = () => {
  submitProductModal.open();
};
</script>

<template>
<header class="h-[60px] flex items-center justify-between gap-5">
  <h1 class="text-2xl font-semibold">
    <NuxtLink to="/">MySite</NuxtLink>
  </h1>
  
  <UInput
    v-model="query"
    icon="lucide:search"
    placeholder="Search products or categories..."
    class="w-full"
    size="lg"
    :ui="{ trailing: '-mr-1.5' }">
    <template v-if="query?.length" #trailing>
      <UButton
        color="neutral"
        variant="ghost"
        size="sm"
        :ui="{ leadingIcon: '!size-4' }"
        class="rounded-full"
        icon="lucide:x"
        aria-label="Clear input"
        @click="query = ''" />
    </template>
  </UInput>
  
  <div class="flex items-center gap-2">
    <UButton
      size="lg"
      color="neutral"
      variant="soft"
      icon="lucide:upload"
      label="Submit Product"
      @click="showSubmitProductModal" />
    <UButton
      size="lg"
      color="neutral"
      variant="outline"
      icon="lucide:log-in"
      label="Login"
      @click="showLoginModal" />
    <UButton
      icon="lucide:user-plus"
      label="Sign Up"
      size="lg"
      @click="showRegisterModal" />
  </div>
</header>
</template>