Uncaught TypeError: $(...).validate is not a function in rails 6 webpack

Using ruby 2.7.1p83, Rails 6.0.3.2 with webpack and yarn

installed jquery-validation for validating password update form:

{
      "name": "garment_customizer_react",
      "private": true,
      "dependencies": {
        "@babel/plugin-proposal-decorators": "^7.10.4",
        "@fortawesome/fontawesome-free": "^5.13.1",
        "@rails/actioncable": "^6.0.0-alpha",
        "@rails/activestorage": "^6.0.0-alpha",
        "@rails/ujs": "^6.0.0-alpha",
        "@rails/webpacker": "4.2.2",
        "bootstrap": "^4.5.0",
        "huebee": "^2.1.0",
        "jquery": "^3.5.1",
        "jquery-ui": "^1.12.1",
        "jquery-ui-dist": "^1.12.1",
        "jquery-validation": "^1.19.2",
        "jquery.easing": "^1.4.1",
        "owl.carousel": "^2.3.4",
        "popper.js": "^1.16.1",
        "turbolinks": "^5.2.0"
      },
      "version": "0.1.0",
      "devDependencies": {
        "webpack-dev-server": "^3.11.0"
      }
    }

script file is as:

<script>
    $(document).ready(function () {
        $("#form1").validate({
                rules: {
                    user_password: {
                        required: true, minlength: 5
                    },
                    user_confirmation_password: {
                        required: true, equalTo: "#user_password", minlength: 5
                    }
                }, messages: {
                    password: " Enter Password",
                    confirmpassword: " Enter Confirm Password Same as Password"
                }

            }
        );
    });
</script>

getting this error in browser console:

> readyException.js:6 Uncaught TypeError: $(...).validate is not a
> function
>     at HTMLDocument.<anonymous> (settings:197)
>     at mightThrow (deferred.js:97)
>     at process (deferred.js:139)

But I have already imported jquery and its validation file here as inside pack/uploader.js:

import "jquery";
import "jquery-validation";
import "popper.js";
import "bootstrap";
import "jquery-ui";
import 'jquery.easing';
import './x3dom'
import '../stylesheets/assets_uploaders_layout.scss';
import "@fortawesome/fontawesome-free/js/all";
import "@fortawesome/fontawesome-free/css/all.css";
import '../stylesheets/x3dom.css';

any idea how to resolve it.
environment.js file:

const { environment } = require('@rails/webpacker')
const webpack = require("webpack");
environment.plugins.append(
    "Provide",
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        jquery: 'jquery/src/jquery',
        Popper: ["popper.js", "default"]
    })
);
module.exports = environment;