Custom DomComponents events resetting after a refresh

[FarazBukhari]

I've recently started using GrapeJS so i'm new to all the features in it. I'm integrating it into my React app and I've been trying to add a custom block that is basically a Sign Up button which will have custom functionality and open a modal that contains a form. My question is this:
Every time I drag and drop the button on to the canvas, my onClick functionality works as expected within the canvas. But if I refresh the page, all the traits, styling and any events I have defined get reset too. The rest of the template is still stored inside my localStorage. I have set the Storage Manager to true inside my config file and I'm not sure what seems to be the problem.

Is this happening because every time I open the page that contains the canvas, the config is reinitialised? (even if that is the case I have initialised all the settings within a useEffect)
Or is this happening because I am missing a config parameter for any custom components?

I have tried defining attributes

editor.DomComponents.addType('sign-up-button', {
  model: {
      defaults: {
          tagName: 'button',
          droppable: false,
          attributes: {
              onclick: "javascript:() => script()", 
              type: 'submit'
          },
          content: 'Sign Up',
          testprop: 1,
      },
  }
}

as well as extending the view for the DomComponent and using scripts to run my functions

view: defaultType.view.extend({
    init() {
        console.log('Local hook: view.init');
    },
    onRender() {
        console.log('Local hook: view.onRender');
    },
    events: {
        click: function (e) { alert('Sign me up!') },
        // click: script
    }
})

The problem isn't the function not running, rather the click events not being retained after a refresh.

[artf]

Be sure to place your custom component code as a plugin.