Update variable value for onbeforeunload

Question

In my application, I'm trying to use sendBeacon to send data to my remote server. One of the data that I need is how many clicks its been on the page and I'm doing it as follows:

var clickNumber = 0;
document.addEventListener("mouseup", function () {clickNumber++;});

var SendToRemote = window.SendToRemote || [];
SendToRemote.init({
  clicks: clickNumber
});

My sendBeacon

 navigator.sendBeacon = (url, data) =>
   window.fetch(url, { method: 'POST', body: {data: data}, credentials: 'include' });

My only issue now is that the clickNumber is always 0 (which is the default value) and even that mouseup does increment clickNumber, but when sending it sends 0.

How am I able to update the clickNumber so when sendBeacon is triggered, it gets the incremented/updated clickNumber instead of 0.

This is my SendToRemote.init which works fine: (PS: I have removed parts of the codes as it would be over 1000 lines, but kept whats needed):

if (!SendToRemote) {
  var SendToRemote = (function(){
      var defaults = {
          endpoints: {
            unload: "https://remote.com"
          },
          processData: function(results){},
      },

      results = {
          click: 0,
          // more stuff here
      },
      support = !!document.querySelector && !!document.addEventListener,
      settings;

      var actions = {           
                        
          sendData: function () {
            results.hmn = parseInt(actions.hmnDetection(
              results.times.tt, results.times.tp, results.click, results.mouse, results.touch, results.scroll, results.tab
            ));

            let url  = settings.endpoints.unload,
                data = JSON.stringify(results);
            navigator.sendBeacon(url, data);
          },

          // more functions here
      }

      function init(options) {
          document.addEventListener('DOMContentLoaded', (event) => {

              // More stuff here

              // Event Listener to porcess
              if(modifiable.processOnAction){
                let node = document.querySelector(modifiable.selector);
                if(!!!node) throw new Error('Selector was not found.');
                actions._e(node, modifiable.event, `init-${modifiable.selector}-processOnAction`, function() {
                    let nodeInput = document.getElementsByName(modifiable.element)[0];
                    if(!!!nodeInput) throw new Error('nodeInput was not found.');
                    nodeInput.value = JSON.stringify(results);
                    hasProcessed    = true;
                  })
              }

              addEventListener('unload', (event) => {
                if (!navigator.sendBeacon) {
                    navigator.sendBeacon = (url, data) =>
                        window.fetch(url, { method: 'POST', body: {data: data}, credentials: 'include' });
                }

                if (!hasProcessed) {
                  actions.sendData();
                  hasProcessed = true;
                }

                return;
              });
          });
      }
      function processResults(){
          if(settings.hasOwnProperty('processData')){
              if (!modifiable.processOnAction){
                  return settings.processData.call(undefined, results);
              }
              return results;
          }
          return false;
      }

      // Module pattern, only expose necessary methods
      return {
          init: init,
          processResults: processResults,
      };

  })();
}

Thanks in advance!