Jquery Validation in Rails 6.0.2 using webpacker

I have built a sample blog application with subscribers. The tech used for this application

• Ruby: 2.6.3
• Rails: 6.0.2
• Webpacker: 4.2.2

I am validating my Subscriber form with Jquery-Validation, to make sure the user enters a valid email.

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"> 
</script>
<script type="text/javascript">
    $("#new_subscriber").validate({
      rules: {
        "subscriber[email]": {
          required: true,
          email: true
        }
      }
    });
</script>

This works locally but doesn't get compiled, So later understood and added

yarn add jquery

#in environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  }),
)

yarn add jquery-validation

Not sure how to call it in envionment.js

My current package.json

{
  "name": "SampleBlog",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "jquery": "^3.5.1",
    "jquery-validation": "^1.19.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

The validation is not working. Later I have created a home.js in javascript/packs and written this code

require("jquery")
require("jquery-validation")

$("#new_subscriber").validate({
  rules: {
    "subscriber[email]": {
      required: true,
      email: true
    }
  }
});

Included this in .html.erb as well

<%= javascript_pack_tag 'home' %>

No help getting the console error, validate is not a function

Any feedback will be very helpful