How to use jQuery UI with vite in laravel 9

I am learning vite and struck with including jquery-ui into the project.

libs.ts

import * as jQuery from 'jquery';
declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}


window.$ = window.jQuery = jQuery;
require('jquery-ui-dist');

main.ts

jQuery(function(){
  console.log("i am called")  // getting console output
  jQuery(".datepicker").datepicker(); // getting error in editor  Property 'datepicker' does not exist on type 'JQuery<HTMLElement>'
});

console output

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/libs.scss',
                'resources/scss/main.scss',
                'resources/css/app.css',
                'resources/js/libs.ts',
                'resources/js/main.ts',
            ],
            refresh: true,
        }),
    ],
    optimizeDeps:{
        esbuildOptions:{
          plugins:[
            esbuildCommonjs(['jquery','jquery-ui-dist/jquery-ui'])
          ]
        }
      }
});

package.json

    "devDependencies": {
        "@originjs/vite-plugin-commonjs": "^1.0.3",
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/line-clamp": "^0.4.0",
        "@tailwindcss/typography": "^0.5.4",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.4.0",
        "lodash": "^4.17.21",
        "postcss": "^8.1.14",
        "tailwindcss": "^3.1.6",
        "vite": "^2.9.11"
    },
    "dependencies": {
        "autoprefixer": "^10.4.7",
        "jquery": "^3.6.0",
        "jquery-ui": "^1.13.2",
        "jquery-ui-dist": "^1.13.1",
        "moment": "^2.29.4",
        "sass": "^1.53.0"
    }