I am working with appsmith and have a very specific to which I cannot figure out the answer.

I have a custom widget in which there is a login form (I needed something very personalized):

HTML

  

    
MIMIR DATABASE
    

      

        Handle:
        
      
      

        Password:
        
      
      Authentication
    
    

      
    
  

JS

appsmith.onReady(() => {
  const form = document.getElementById('login-form');
  if (form) {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      const handle = document.getElementById('handle').value;
      const password = document.getElementById('password').value;
      // Send the JS object to Appsmith, accessible via the widget's event response
      appsmith.triggerEvent("onSubmit", {handle, password});
    });
  }
});

Upon the click of the submit button, trigger the event "onSubmit", to which i have defined the handler :

{{JSObject1.login}}

Is now triggers a function in a JSObject

export default {
  login: async (params) => {
    showAlert((params.handle));
  },
};

When i do not use the payload "params", everything works fine. But when i try to pass the payload, i get a scope error :

console.ts:55 DataCloneError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': function(){for(var n=arguments.length,t=new Array(n),A=0;A...}} could not be cloned.
    at a (MessageUtil.ts:47:8)
    at S.respond (Messenger.ts:123:19)
    at evaluation.worker.ts:65:19

How can i get around this problem ?