I'm trying to implement inside tinymce in React a custom button, that should toggle icon and li tag.

I've tried this :

 <Editor
  apiKey={editorApiKey}
  onInit={(evt, editor) => editorRef.current = editor}
.
.
.

editor.ui.registry.addToggleButton('CustomNoneListButton', {
  text: 'My action',
  onAction() {
    editor.execCommand('InsertUnorderedList', false, {
      'list-style-type': 'none'
    });
  },
  active: true,
  onSetup: (api) => {
    const editorEventCallback = (eventApi) => {
      api.setActive(eventApi.element.nodeName.toLowerCase() === 'li');
    };

    editor.on('NodeChange', editorEventCallback);

    return () => {
      editor.off('NodeChange', editorEventCallback);
    };
  }
});

But it doesn't work, Any idea how can I do that?