Applying brightness filter not working with CamanJS

I’m trying to edit an image by changing it brightness ..vice versa using the CamanJS library
Here is my snippet code

<canvas id="main_canvas"></canvas>
<button id="test_btn">btn1</button>

and the for the JS script, I created Image object and connect it to the canvas tag, nothing happened before and after clicking the test button, also no error appears.

var canvas = document.getElementById("main_canvas");
var ctx = canvas.getContext("2d");
var img2 = new Image();

loadImage = function (src) {
  img2.crossOrigin = "";
  //  set the image source
  img2.src = src;
  img2.onload = function () {
    canvas.width = img2.width;
    canvas.height = img2.height;
    ctx.drawImage(img2, 0, 0, img2.width, img2.height);
  };
};

//  Load the image & without CORS issues
loadImage(
  "https://cdn.pixabay.com/photo/2020/03/18/05/23/rose-4942713_960_720.png"
);

// Apply the camanJS filter [ Brightness ]
$("#test_btn").click(function () {
  Caman("#main_canvas", img2, function () {
    this.brightness(30).render();
    console.log("section is edited ");
  });
});

Does anyone could explain to me what’s wrong in my snippet code ?