Laravel Livewire hot reload with vite-livewire-plugin is throwing an error. livewire is not a function

I just setup a new laravel app, in my configuration I want to add livewire hot reload for with vite. I used @defstudio/vite-livewire-plugin plugin, but I am getting an error.

failed to load config from C:\laragon\www...\vite.config.js error when starting dev server: TypeError: livewire is not a function at file:///C:/laragon/www/.../vite.config.js.timestamp-1685705971244-46c1e7e82f4c2.mjs:11:5 at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Package Json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@defstudio/vite-livewire-plugin": "^1.1.0",
        "autoprefixer": "^10.4.14",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.24",
        "tailwindcss": "^3.3.2",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@alpinejs/mask": "^3.12.2",
        "@tailwindcss/forms": "^0.5.3",
        "alpinejs": "^3.12.2"
    }
}

Vite Config file

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

import livewire from '@defstudio/vite-livewire-plugin';
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),

        livewire({  // <-- add livewire plugin
            refresh: ['resources/css/app.css'],  // <-- will refresh css (tailwind ) as well
        }),
    ],
});

App.js

import './bootstrap';
import { livewire_hot_reload } from 'virtual:livewire-hot-reload'
livewire_hot_reload();