Vue Test Utils - It doesn't mount the component for the test and it still returns "Cannot read properties of undefined " in the terminal

Question

After implementing the searchBar logic, my tests stopped working (even those that don't depend on this searchBar component), I tried to mount the Header component with shallowMount, but it doesn't work.

my header component:

<script setup lang="ts">
import AccountDropdown from "@/components/menu/AccountDropdown.vue";
import HelpDropdown from "@/components/menu/HelpDropdown.vue";
import MenuDropdown from "@/components/menu/MenuDropdown.vue";
import SearchPanel from "@/components/menu/SearchPanel.vue";

const store = useLoginStore();

const props = defineProps({
    isUserAuthenticated: {
        type: Boolean,
        default: false,
    },
    showOnlyLogo: {
        type: Boolean,
        default: false,
    },
    isInSearchMode: {
        type: Boolean,
        default: false,
    },
});

const menuItems = ref([
{
    title: "title 01",
    show: props.isUserAuthenticated,
    links: [
        {
            title: "title 02",
            to: "/",
            target: "\_self",
            show: true,
        },
        {
            title: "title 03",
            to: "/learning-paths",
            target: "\_self",
            show: true,
        },
        {
            title: "title 04",
            to: "/",
            target: "\_self",
            show: store.isAdmin,
        },
    ],
},
{
    title: "title 05",
    show: true,
    links: [
        {
            title: "title 06",
            to: "/register",
            target: "\_self",
            show: true,
        },
        {
            title: "title 07",
            to: "/d",
            target: "\_self",
            show: true,
        },
    ],
},
{
    title: "title 08",
    show: true,
    to: "/",
    target: "\_self",
},
{
    title: "title 09",
    show: true,
    links: [
        {
            title: "title 10",
            to: "/",
            target: "\_blank",
            show: true,
        },
        {
            title: "title 11",
            to: "/",
            target: "\_self",
            show: true,
        },
    ],
},
]);

const viewState = reactive({
    search: {
        isVisible: false,
    },
});

function toggleSearch() {
    viewState.search.isVisible = !viewState.search.isVisible;
}
</script>

<template>
<div
    class="
        flex flex-row
        justify-between
        items-center
        bg-white
        pl-[23px]
        pt-[29px]
        pb-[21px]
        pr-[70px]
        border-b-kk-primary-green border-b-[8px]
    "
>

<img alt="Logo" src="@/assets/logo.svg" width="317" height="89" />

<SearchPanel
    :open="viewState.search.isVisible"
    @close-search-panel="toggleSearch"
>
    <div
        v-if="!showOnlyLogo && !viewState.search.isVisible"
        class="flex items-center justify-end grow-[2] pr-[24px] space-x-[24px]"
    >
        <button
            v-show="isUserAuthenticated"
            class="focus:outline-kk-primary-green"
            @click="toggleSearch"
        >
         <img
            class="ml-[15px]"
            alt="Search"
            src="@/assets/search.svg"
            width="16"
            height="16"
         />
        </button>
    </div>
    <div
        v-if="!isUserAuthenticated && !showOnlyLogo"
        class="grid grid-cols-2 justify-self-end items-center gap-[18px]"
    >
        <nuxt-link
            class="
                flex
                h-[40px]
                w-[96px]
                py-[8px]
                px-[16px]
                items-center
                justify-center
                space-x-[8px]
                bg-lg-dark-blue
                text-[16px] text-white
                font-opensans font-[600]
                hover:bg-lg-ocean-hover
                focus:outline-kk-primary-green
            "
            to="/register"
        >Sign Up
        </nuxt-link>
        <nuxt-link
            class="
                flex
                h-[40px]
                w-[96px]
                py-[8px]
                px-[16px]
                items-center
                justify-center
                space-x-[8px]
                bg-lg-primary-green
                text-[16px] text-white
                font-opensans font-[600]
                hover:bg-kk-hv-green
                focus:outline-kk-primary-green
            "
            to="/login"
            >Log In
        </nuxt-link>
    </div>
    <div
        v-if="isUserAuthenticated && !showOnlyLogo"
        class="grid grid-cols-2 items-center gap-[24px] z-50"
    >
        <HelpDropdown />
        <AccountDropdown />
    </div>
</template>

import {shallowMount } from '@vue/test-utils';
import { expect, describe, it } from 'vitest';
import Header from "@/components/Header.vue";

describe("Header", () =\> {
it("should render the component header", () =\> {
const wrapper = shallowMount(Header)
expect(wrapper.isVueInstance()).toBe(true)

    })

})

What do I get in the terminal: enter image description here

I tried to test with shallowMount to avoid rendering the child components, but it didn't help, I tried some stups too.