diff --git a/.eslintrc.json b/.eslintrc.json
index 90acd3f2..5a2b0ad2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -5,7 +5,10 @@
         "**/*.ts",
         "**/*.tsx"
       ],
-      "extends": "plugin:@tinymce/standard",
+      "extends": [
+        "plugin:@tinymce/standard",
+        "plugin:react-hooks/recommended"
+      ],
       "parserOptions": {
         "project": "tsconfig.json",
         "sourceType": "module"
@@ -20,9 +23,14 @@
         "src/test/**/*"
       ],
       "rules": {
-        "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "^_"
+          }
+        ],
         "no-var": "off" // Without this the `using` keyword causes eslint to throw an error during linting.
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index e659dd9c..c4cdb6cb 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "gh-pages": "^6.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/main/ts/Utils.ts b/src/main/ts/Utils.ts
index 1a517d7b..35343a98 100644
--- a/src/main/ts/Utils.ts
+++ b/src/main/ts/Utils.ts
@@ -1,6 +1,7 @@
-import { eventPropTypes, IEventPropTypes } from './components/EditorPropTypes';
+import { Type } from '@ephox/katamari';
+import type { EditorEvent, Editor as TinyMCEEditor } from 'tinymce';
 import { IAllProps } from './components/Editor';
-import type { Editor as TinyMCEEditor, EditorEvent } from 'tinymce';
+import { eventPropTypes, IEventPropTypes } from './components/EditorPropTypes';
 
 export const isFunction = (x: unknown): x is Function => typeof x === 'function';
 
@@ -15,35 +16,55 @@ export const configHandlers2 = <H> (
   on: (name: string, handler: H) => void,
   off: (name: string, handler: H) => void,
   adapter: <K extends keyof IEventPropTypes> (lookup: PropLookup, key: K) => H,
-  prevProps: Partial<IAllProps>,
   props: Partial<IAllProps>,
   boundHandlers: Record<string, H>
 ): void => {
-  const prevEventKeys = Object.keys(prevProps).filter(isEventProp);
+  const eventKeys: Array<keyof IEventPropTypes> = Object.keys(eventPropTypes) as Array<keyof IEventPropTypes>;
   const currEventKeys = Object.keys(props).filter(isEventProp);
+  const unboundEventKeys = eventKeys.filter((key) => props[key] === undefined);
 
-  const removedKeys = prevEventKeys.filter((key) => props[key] === undefined);
-  const addedKeys = currEventKeys.filter((key) => prevProps[key] === undefined);
-
-  removedKeys.forEach((key) => {
+  unboundEventKeys.forEach((key) => {
     // remove event handler
     const eventName = eventAttrToEventName(key);
     const wrappedHandler = boundHandlers[eventName];
-    off(eventName, wrappedHandler);
-    delete boundHandlers[eventName];
+    if (Type.isNonNullable(wrappedHandler)) {
+      off(eventName, wrappedHandler);
+      delete boundHandlers[eventName];
+    }
   });
 
-  addedKeys.forEach((key) => {
+  currEventKeys.forEach((key) => {
     const wrappedHandler = adapter(handlerLookup, key);
     const eventName = eventAttrToEventName(key);
-    boundHandlers[eventName] = wrappedHandler;
-    on(eventName, wrappedHandler);
+    if (wrappedHandler !== boundHandlers[eventName]) {
+      boundHandlers[eventName] = wrappedHandler;
+      on(eventName, wrappedHandler);
+    }
   });
 };
 
+const adapterMemo = (() => {
+  const cache = new Map<TinyMCEEditor, <K extends keyof IEventPropTypes> (lookup: PropLookup, key: K) => (e: any) => unknown>();
+  return (editor: TinyMCEEditor) => {
+    let result = cache.get(editor);
+    const lookupCache = new Map<keyof IEventPropTypes, [any, (e: any) => unknown]>();
+    if (!result) {
+      result = (handlerLookup, key) => {
+        if (!lookupCache.has(key) || lookupCache.get(key)?.[0] !== handlerLookup(key)) {
+          lookupCache.set(key, [ handlerLookup(key), (e) => handlerLookup(key)?.(e, editor) ]);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return lookupCache.get(key)![1];
+      };
+      cache.set(editor, result);
+    }
+    return result;
+  };
+
+})();
+
 export const configHandlers = (
   editor: TinyMCEEditor,
-  prevProps: Partial<IAllProps>,
   props: Partial<IAllProps>,
   boundHandlers: Record<string, (event: EditorEvent<any>) => unknown>,
   lookup: PropLookup
@@ -52,9 +73,7 @@ export const configHandlers = (
     lookup,
     editor.on.bind(editor),
     editor.off.bind(editor),
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    (handlerLookup, key) => (e) => handlerLookup(key)?.(e, editor),
-    prevProps,
+    adapterMemo(editor),
     props,
     boundHandlers
   );
@@ -109,4 +128,4 @@ export const setMode = (editor: TinyMCEEditor | undefined, mode: 'readonly' | 'd
       (editor as any).setMode(mode);
     }
   }
-};
\ No newline at end of file
+};
diff --git a/src/main/ts/components/Editor.tsx b/src/main/ts/components/Editor.tsx
index b9d3876d..1e2ecd29 100644
--- a/src/main/ts/components/Editor.tsx
+++ b/src/main/ts/components/Editor.tsx
@@ -1,10 +1,20 @@
+import { Type } from '@ephox/katamari';
 import * as React from 'react';
+import type { Bookmark, EditorEvent, TinyMCE, Editor as TinyMCEEditor } from 'tinymce';
 import { IEvents } from '../Events';
 import { ScriptItem, ScriptLoader } from '../ScriptLoader2';
 import { getTinymce } from '../TinyMCE';
-import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers, isBeforeInputEventAvailable, isInDoc, setMode } from '../Utils';
-import { EditorPropTypes, IEditorPropTypes } from './EditorPropTypes';
-import type { Bookmark, Editor as TinyMCEEditor, EditorEvent, TinyMCE } from 'tinymce';
+import {
+  configHandlers,
+  isBeforeInputEventAvailable,
+  isFunction,
+  isInDoc,
+  isTextareaOrInput,
+  mergePlugins,
+  setMode,
+  uuid
+} from '../Utils';
+import { EditorPropTypes } from './EditorPropTypes';
 
 type OmitStringIndexSignature<T> = { [K in keyof T as string extends K ? never : K]: T[K] };
 
@@ -135,171 +145,81 @@ export interface IAllProps extends Partial<IProps>, Partial<IEvents> { }
 /**
  * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/ TinyMCE React Technical Reference}
  */
-export class Editor extends React.Component<IAllProps> {
-  public static propTypes: IEditorPropTypes = EditorPropTypes;
-
-  public static defaultProps: Partial<IAllProps> = {
-    cloudChannel: '7',
-  };
-
-  public editor?: TinyMCEEditor;
-
-  private id: string;
-  private elementRef: React.RefObject<HTMLElement>;
-  private inline: boolean;
-  private currentContent?: string;
-  private boundHandlers: Record<string, (event: EditorEvent<unknown>) => unknown>;
-  private rollbackTimer: number | undefined = undefined;
-  private valueCursor: Bookmark | undefined = undefined;
-
-  public constructor(props: Partial<IAllProps>) {
-    super(props);
-    this.id = this.props.id || uuid('tiny-react');
-    this.elementRef = React.createRef<HTMLElement>();
-    this.inline = this.props.inline ?? this.props.init?.inline ?? false;
-    this.boundHandlers = {};
-  }
-
-  private get view() {
-    return this.elementRef.current?.ownerDocument.defaultView ?? window;
-  }
-
-  public componentDidUpdate(prevProps: Partial<IAllProps>) {
-    if (this.rollbackTimer) {
-      clearTimeout(this.rollbackTimer);
-      this.rollbackTimer = undefined;
-    }
-    if (this.editor) {
-      this.bindHandlers(prevProps);
-      if (this.editor.initialized) {
-        this.currentContent = this.currentContent ?? this.editor.getContent();
-        if (typeof this.props.initialValue === 'string' && this.props.initialValue !== prevProps.initialValue) {
-          // same as resetContent in TinyMCE 5
-          this.editor.setContent(this.props.initialValue);
-          this.editor.undoManager.clear();
-          this.editor.undoManager.add();
-          this.editor.setDirty(false);
-        } else if (typeof this.props.value === 'string' && this.props.value !== this.currentContent) {
-          const localEditor = this.editor;
-          localEditor.undoManager.transact(() => {
-            // inline editors grab focus when restoring selection
-            // so we don't try to keep their selection unless they are currently focused
-            let cursor: Bookmark | undefined;
-            if (!this.inline || localEditor.hasFocus()) {
-              try {
-                // getBookmark throws exceptions when the editor has not been focused
-                // possibly only in inline mode but I'm not taking chances
-                cursor = localEditor.selection.getBookmark(3);
-              } catch (e) { /* ignore */ }
-            }
-            const valueCursor = this.valueCursor;
-            localEditor.setContent(this.props.value as string);
-            if (!this.inline || localEditor.hasFocus()) {
-              for (const bookmark of [ cursor, valueCursor ]) {
-                if (bookmark) {
-                  try {
-                    localEditor.selection.moveToBookmark(bookmark);
-                    this.valueCursor = bookmark;
-                    break;
-                  } catch (e) { /* ignore */ }
-                }
-              }
-            }
-          });
-        }
-        if (this.props.disabled !== prevProps.disabled) {
-          const disabled = this.props.disabled ?? false;
-          setMode(this.editor, disabled ? 'readonly' : 'design');
-        }
-      }
-    }
-  }
-
-  public componentDidMount() {
-    if (getTinymce(this.view) !== null) {
-      this.initialise();
-    } else if (Array.isArray(this.props.tinymceScriptSrc) && this.props.tinymceScriptSrc.length === 0) {
-      this.props.onScriptsLoadError?.(new Error('No `tinymce` global is present but the `tinymceScriptSrc` prop was an empty array.'));
-    } else if (this.elementRef.current?.ownerDocument) {
-      const successHandler = () => {
-        this.props.onScriptsLoad?.();
-        this.initialise();
-      };
-      const errorHandler = (err: unknown) => {
-        this.props.onScriptsLoadError?.(err);
-      };
-      ScriptLoader.loadList(
-        this.elementRef.current.ownerDocument,
-        this.getScriptSources(),
-        this.props.scriptLoading?.delay ?? 0,
-        successHandler,
-        errorHandler
-      );
-    }
-  }
-
-  public componentWillUnmount() {
-    const editor = this.editor;
-    if (editor) {
-      editor.off(this.changeEvents(), this.handleEditorChange);
-      editor.off(this.beforeInputEvent(), this.handleBeforeInput);
-      editor.off('keypress', this.handleEditorChangeSpecial);
-      editor.off('keydown', this.handleBeforeInputSpecial);
-      editor.off('NewBlock', this.handleEditorChange);
-      Object.keys(this.boundHandlers).forEach((eventName) => {
-        editor.off(eventName, this.boundHandlers[eventName]);
-      });
-      this.boundHandlers = {};
-      editor.remove();
-      this.editor = undefined;
-    }
-  }
-
-  public render() {
-    return this.inline ? this.renderInline() : this.renderIframe();
-  }
-
-  private changeEvents() {
-    const isIE = getTinymce(this.view)?.Env?.browser?.isIE();
+export const Editor = React.forwardRef<HTMLElement, IAllProps>((props, ref) => {
+  const {
+    cloudChannel = '7',
+    tinymceScriptSrc,
+    onScriptsLoad,
+    onScriptsLoadError,
+    initialValue,
+    value,
+    rollback,
+    onEditorChange,
+  } = props;
+  const editorRef = React.useRef<TinyMCEEditor>();
+  const elementRef = React.useRef<HTMLElement | null>(null);
+  const [ id ] = React.useState(props.id || uuid('tiny-react'));
+  const inline = React.useMemo(() => props.inline ?? props.init?.inline ?? false, [ props.inline, props.init?.inline ]);
+  const boundHandlersRef = React.useRef<Record<string, (event: EditorEvent<unknown>) => unknown>>({});
+  const rollbackTimerRef = React.useRef<number>();
+  const [ valueCursor, setValueCursor ] = React.useState<Bookmark>();
+  const currentContentRef = React.useRef<string>(initialValue ?? '');
+
+  const view = elementRef.current?.ownerDocument.defaultView ?? window;
+
+  // Add other necessary useEffect hooks for handling prop changes
+  //
+  const changeEvents = React.useCallback(() => {
+    const isIE = getTinymce(view)?.Env?.browser?.isIE();
     return (isIE
       ? 'change keyup compositionend setcontent CommentChange'
       : 'change input compositionend setcontent CommentChange'
     );
-  }
+  }, [ view ]);
 
-  private beforeInputEvent() {
-    return isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange';
-  }
+  const beforeInputEvent = React.useCallback(() => isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange', []);
 
-  private renderInline() {
-    const { tagName = 'div' } = this.props;
+  const renderInline = () => {
+    const { tagName = 'div' } = props;
 
     return React.createElement(tagName, {
-      ref: this.elementRef,
-      id: this.id,
-      tabIndex: this.props.tabIndex
-    });
-  }
-
-  private renderIframe() {
-    return React.createElement('textarea', {
-      ref: this.elementRef,
-      style: { visibility: 'hidden' },
-      name: this.props.textareaName,
-      id: this.id,
-      tabIndex: this.props.tabIndex
+      ref: (el: HTMLElement) => {
+        elementRef.current = el;
+        if (typeof ref === 'function') {
+          ref(el);
+        } else if (ref) {
+          ref.current = el;
+        }
+      },
+      id,
+      tabIndex: props.tabIndex
     });
-  }
-
-  private getScriptSources(): ScriptItem[] {
-    const async = this.props.scriptLoading?.async;
-    const defer = this.props.scriptLoading?.defer;
-    if (this.props.tinymceScriptSrc !== undefined) {
-      if (typeof this.props.tinymceScriptSrc === 'string') {
-        return [{ src: this.props.tinymceScriptSrc, async, defer }];
+  };
+
+  const renderIframe = () => React.createElement('textarea', {
+    ref: (el) => {
+      elementRef.current = el;
+      if (typeof ref === 'function') {
+        ref(el);
+      } else if (ref) {
+        ref.current = el;
+      }
+    },
+    style: { visibility: 'hidden' },
+    name: props.textareaName,
+    id,
+    tabIndex: props.tabIndex
+  });
+
+  const getScriptSources = () => {
+    const async = props.scriptLoading?.async;
+    const defer = props.scriptLoading?.defer;
+    if (tinymceScriptSrc !== undefined) {
+      if (typeof tinymceScriptSrc === 'string') {
+        return [{ src: tinymceScriptSrc, async, defer }];
       }
       // multiple scripts can be specified which allows for hybrid mode
-      return this.props.tinymceScriptSrc.map((item) => {
+      return tinymceScriptSrc.map((item) => {
         if (typeof item === 'string') {
           // async does not make sense for multiple items unless
           // they are not dependent (which will be unlikely)
@@ -310,150 +230,135 @@ export class Editor extends React.Component<IAllProps> {
       });
     }
     // fallback to the cloud when the tinymceScriptSrc is not specified
-    const channel = this.props.cloudChannel as Version; // `cloudChannel` is in `defaultProps`, so it's always defined.
-    const apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
+    const channel = cloudChannel as Version; // `cloudChannel` is in `defaultProps`, so it's always defined.
+    const apiKey = props.apiKey ? props.apiKey : 'no-api-key';
     const cloudTinyJs = `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
     return [{ src: cloudTinyJs, async, defer }];
-  }
+  };
 
-  private getInitialValue() {
-    if (typeof this.props.initialValue === 'string') {
-      return this.props.initialValue;
-    } else if (typeof this.props.value === 'string') {
-      return this.props.value;
+  const getInitialValue = () => {
+    if (typeof initialValue === 'string') {
+      return initialValue;
+    } else if (typeof value === 'string') {
+      return value;
     } else {
       return '';
     }
-  }
-
-  private bindHandlers(prevProps: Partial<IAllProps>) {
-    if (this.editor !== undefined) {
-      // typescript chokes trying to understand the type of the lookup function
-      configHandlers(this.editor, prevProps, this.props, this.boundHandlers, (key) => this.props[key] as any);
-      // check if we should monitor editor changes
-      const isValueControlled = (p: Partial<IAllProps>) => p.onEditorChange !== undefined || p.value !== undefined;
-      const wasControlled = isValueControlled(prevProps);
-      const nowControlled = isValueControlled(this.props);
-      if (!wasControlled && nowControlled) {
-        this.editor.on(this.changeEvents(), this.handleEditorChange);
-        this.editor.on(this.beforeInputEvent(), this.handleBeforeInput);
-        this.editor.on('keydown', this.handleBeforeInputSpecial);
-        this.editor.on('keyup', this.handleEditorChangeSpecial);
-        this.editor.on('NewBlock', this.handleEditorChange);
-      } else if (wasControlled && !nowControlled) {
-        this.editor.off(this.changeEvents(), this.handleEditorChange);
-        this.editor.off(this.beforeInputEvent(), this.handleBeforeInput);
-        this.editor.off('keydown', this.handleBeforeInputSpecial);
-        this.editor.off('keyup', this.handleEditorChangeSpecial);
-        this.editor.off('NewBlock', this.handleEditorChange);
-      }
-    }
-  }
+  };
 
-  private rollbackChange = () => {
-    const editor = this.editor;
-    const value = this.props.value;
-    if (editor && value && value !== this.currentContent) {
+  const rollbackChange = React.useCallback(() => {
+    const editor = editorRef.current;
+    const content = editor?.getContent();
+    if (editor && value && value !== content) {
       editor.undoManager.ignore(() => {
         editor.setContent(value);
         // only restore cursor on inline editors when they are focused
         // as otherwise it will cause a focus grab
-        if (this.valueCursor && (!this.inline || editor.hasFocus())) {
+        if (valueCursor && (!inline || editor.hasFocus())) {
           try {
-            editor.selection.moveToBookmark(this.valueCursor);
+            editor.selection.moveToBookmark(valueCursor);
           } catch (e) { /* ignore */ }
         }
       });
     }
-    this.rollbackTimer = undefined;
-  };
+    rollbackTimerRef.current = undefined;
+  }, [ value, inline, valueCursor ]);
 
-  private handleBeforeInput = (_evt: EditorEvent<unknown>) => {
-    if (this.props.value !== undefined && this.props.value === this.currentContent && this.editor) {
-      if (!this.inline || this.editor.hasFocus()) {
+  const bindHandlers = React.useCallback(() => {
+    if (editorRef.current !== undefined) {
+      // typescript chokes trying to understand the type of the lookup function
+      configHandlers(editorRef.current, props, boundHandlersRef.current, (key) => props[key] as any);
+      // check if we should monitor editor changes
+    }
+  }, [ props ]);
+
+  const handleBeforeInput = React.useCallback((_evt: EditorEvent<unknown>) => {
+    const content = editorRef.current?.getContent();
+    if (value !== undefined && value === content && editorRef.current) {
+      if (!inline || editorRef.current.hasFocus()) {
         try {
           // getBookmark throws exceptions when the editor has not been focused
           // possibly only in inline mode but I'm not taking chances
-          this.valueCursor = this.editor.selection.getBookmark(3);
+          setValueCursor(editorRef.current.selection.getBookmark(3));
         } catch (e) { /* ignore */ }
       }
     }
-  };
+  }, [ value, inline ]);
 
-  private handleBeforeInputSpecial = (evt: EditorEvent<KeyboardEvent>) => {
+  const handleBeforeInputSpecial = React.useCallback((evt: EditorEvent<KeyboardEvent>) => {
     if (evt.key === 'Enter' || evt.key === 'Backspace' || evt.key === 'Delete') {
-      this.handleBeforeInput(evt);
+      handleBeforeInput(evt);
     }
-  };
+  }, [ handleBeforeInput ]);
 
-  private handleEditorChange = (_evt: EditorEvent<unknown>) => {
-    const editor = this.editor;
-    if (editor && editor.initialized) {
-      const newContent = editor.getContent();
-      if (this.props.value !== undefined && this.props.value !== newContent && this.props.rollback !== false) {
+  const handleEditorChange = React.useCallback((_evt: EditorEvent<unknown>) => {
+    const currentEditor = editorRef.current;
+    if (currentEditor && currentEditor.initialized) {
+      const newContent = currentEditor.getContent();
+      if (value !== undefined && value !== newContent && rollback !== false) {
         // start a timer and revert to the value if not applied in time
-        if (!this.rollbackTimer) {
-          this.rollbackTimer = window.setTimeout(
-            this.rollbackChange,
-            typeof this.props.rollback === 'number' ? this.props.rollback : 200
+        if (!rollbackTimerRef.current) {
+          rollbackTimerRef.current = window.setTimeout(
+            rollbackChange,
+            typeof rollback === 'number' ? rollback : 200
           );
         }
       }
 
-      if (newContent !== this.currentContent) {
-        this.currentContent = newContent;
-        if (isFunction(this.props.onEditorChange)) {
-          this.props.onEditorChange(newContent, editor);
+      if (newContent !== currentContentRef.current) {
+        currentContentRef.current = newContent;
+        if (isFunction(onEditorChange)) {
+          onEditorChange(newContent, currentEditor);
         }
       }
     }
-  };
+  }, [ value, onEditorChange, rollback, rollbackChange ]);
 
-  private handleEditorChangeSpecial = (evt: EditorEvent<KeyboardEvent>) => {
+  const handleEditorChangeSpecial = React.useCallback((evt: EditorEvent<KeyboardEvent>) => {
     if (evt.key === 'Backspace' || evt.key === 'Delete') {
-      this.handleEditorChange(evt);
+      handleEditorChange(evt);
     }
-  };
+  }, [ handleEditorChange ]);
 
-  private initialise = (attempts = 0) => {
-    const target = this.elementRef.current;
+  const initialise = React.useCallback((attempts = 0) => {
+    const target = elementRef.current;
     if (!target) {
       return; // Editor has been unmounted
     }
     if (!isInDoc(target)) {
-      // this is probably someone trying to help by rendering us offscreen
+      // is probably someone trying to help by rendering us offscreen
       // but we can't do that because the editor iframe must be in the document
       // in order to have state
       if (attempts === 0) {
         // we probably just need to wait for the current events to be processed
-        setTimeout(() => this.initialise(1), 1);
+        setTimeout(() => initialise(1), 1);
       } else if (attempts < 100) {
         // wait for ten seconds, polling every tenth of a second
-        setTimeout(() => this.initialise(attempts + 1), 100);
+        setTimeout(() => initialise(attempts + 1), 100);
       } else {
-        // give up, at this point it seems that more polling is unlikely to help
+        // give up, at point it seems that more polling is unlikely to help
         throw new Error('tinymce can only be initialised when in a document');
       }
       return;
     }
 
-    const tinymce = getTinymce(this.view);
+    const tinymce = getTinymce(view);
     if (!tinymce) {
       throw new Error('tinymce should have been loaded into global scope');
     }
 
     const finalInit: EditorOptions = {
-      ...this.props.init as Omit<InitOptions, OmittedInitProps>,
+      ...props.init as Omit<InitOptions, OmittedInitProps>,
       selector: undefined,
       target,
-      readonly: this.props.disabled,
-      inline: this.inline,
-      plugins: mergePlugins(this.props.init?.plugins, this.props.plugins),
-      toolbar: this.props.toolbar ?? this.props.init?.toolbar,
-      ...(this.props.licenseKey ? { license_key: this.props.licenseKey } : {}),
-      setup: (editor) => {
-        this.editor = editor;
-        this.bindHandlers({});
+      readonly: props.disabled,
+      inline,
+      plugins: mergePlugins(props.init?.plugins, props.plugins),
+      toolbar: props.toolbar ?? props.init?.toolbar,
+      ...(props.licenseKey ? { license_key: props.licenseKey } : {}),
+      setup: (ed) => {
+        editorRef.current = ed;
+        bindHandlers();
 
         // When running in inline mode the editor gets the initial value
         // from the innerHTML of the element it is initialized on.
@@ -461,43 +366,174 @@ export class Editor extends React.Component<IAllProps> {
         // to remove XSS in the react integration so we have a chicken and egg
         // problem... We avoid it by sneaking in a set content before the first
         // "official" setContent and using TinyMCE to do the sanitization.
-        if (this.inline && !isTextareaOrInput(target)) {
-          editor.once('PostRender', (_evt) => {
-            editor.setContent(this.getInitialValue(), { no_events: true });
+        if (inline && !isTextareaOrInput(target)) {
+          ed.once('PostRender', (_evt) => {
+            ed.setContent(getInitialValue(), { no_events: true });
           });
         }
 
-        if (this.props.init && isFunction(this.props.init.setup)) {
-          this.props.init.setup(editor);
+        if (props.init && isFunction(props.init.setup)) {
+          props.init.setup(ed);
         }
       },
       init_instance_callback: (editor) => {
         // check for changes that happened since tinymce.init() was called
-        const initialValue = this.getInitialValue();
-        this.currentContent = this.currentContent ?? editor.getContent();
-        if (this.currentContent !== initialValue) {
-          this.currentContent = initialValue;
+        const retrievedInitialValue = getInitialValue();
+        const currentEditorContent = editor.getContent();
+        if (currentEditorContent !== retrievedInitialValue) {
           // same as resetContent in TinyMCE 5
-          editor.setContent(initialValue);
+          editor.setContent(retrievedInitialValue);
           editor.undoManager.clear();
           editor.undoManager.add();
           editor.setDirty(false);
         }
-        const disabled = this.props.disabled ?? false;
-        setMode(this.editor, disabled ? 'readonly' : 'design');
+        const disabled = props.disabled ?? false;
+        setMode(editor, disabled ? 'readonly' : 'design');
         // ensure existing init_instance_callback is called
-        if (this.props.init && isFunction(this.props.init.init_instance_callback)) {
-          this.props.init.init_instance_callback(editor);
+        if (props.init && isFunction(props.init.init_instance_callback)) {
+          props.init.init_instance_callback(editor);
         }
       }
     };
-    if (!this.inline) {
+    if (!inline) {
       target.style.visibility = '';
     }
     if (isTextareaOrInput(target)) {
-      target.value = this.getInitialValue();
+      target.value = getInitialValue();
     }
 
     tinymce.init(finalInit);
-  };
-}
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (getTinymce(view) !== null) {
+      initialise();
+    } else if (Array.isArray(tinymceScriptSrc) && tinymceScriptSrc.length === 0) {
+      onScriptsLoadError?.(new Error('No `tinymce` global is present but the `tinymceScriptSrc` prop was an empty array.'));
+    } else if (elementRef.current?.ownerDocument) {
+      const successHandler = () => {
+        onScriptsLoad?.();
+        initialise();
+      };
+      const errorHandler = (err: unknown) => {
+        onScriptsLoadError?.(err);
+      };
+      ScriptLoader.loadList(
+        elementRef.current.ownerDocument,
+        getScriptSources(),
+        props.scriptLoading?.delay ?? 0,
+        successHandler,
+        errorHandler
+      );
+    }
+
+    const boundHandlers = boundHandlersRef.current;
+
+    return () => {
+      const editor = editorRef.current;
+      if (editor) {
+        editor.off(changeEvents(), handleEditorChange);
+        editor.off(beforeInputEvent(), handleBeforeInput);
+        editor.off('keypress', handleEditorChangeSpecial);
+        editor.off('keydown', handleBeforeInputSpecial);
+        editor.off('NewBlock', handleEditorChange);
+        Object.keys(boundHandlers).forEach((eventName) => {
+          editor.off(eventName, boundHandlers[eventName]);
+        });
+        boundHandlersRef.current = {};
+        editor.remove();
+        editorRef.current = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (editorRef.current !== undefined) {
+      // check if we should monitor editor changes
+      const isValueControlled = onEditorChange !== undefined || value !== undefined;
+      if (isValueControlled) {
+        editorRef.current.on(changeEvents(), handleEditorChange);
+        editorRef.current.on(beforeInputEvent(), handleBeforeInput);
+        editorRef.current.on('keydown', handleBeforeInputSpecial);
+        editorRef.current.on('keyup', handleEditorChangeSpecial);
+        editorRef.current.on('NewBlock', handleEditorChange);
+      } else {
+        editorRef.current.off(changeEvents(), handleEditorChange);
+        editorRef.current.off(beforeInputEvent(), handleBeforeInput);
+        editorRef.current.off('keydown', handleBeforeInputSpecial);
+        editorRef.current.off('keyup', handleEditorChangeSpecial);
+        editorRef.current.off('NewBlock', handleEditorChange);
+      }
+    }
+  }, [
+    onEditorChange,
+    value,
+    handleEditorChange,
+    handleBeforeInput,
+    handleBeforeInputSpecial,
+    handleEditorChangeSpecial,
+    beforeInputEvent,
+    changeEvents
+  ]);
+
+  React.useEffect(() => {
+    if (editorRef.current) {
+      bindHandlers();
+    }
+  }, [ bindHandlers ]);
+
+  React.useEffect(() => {
+    if (rollbackTimerRef.current) {
+      clearTimeout(rollbackTimerRef.current);
+      rollbackTimerRef.current = undefined;
+    }
+    if (editorRef.current) {
+      if (editorRef.current.initialized) {
+        const editorContent = editorRef.current.getContent();
+        if (typeof initialValue === 'string') {
+          // same as resetContent in TinyMCE 5
+          editorRef.current.setContent(initialValue);
+          editorRef.current.undoManager.clear();
+          editorRef.current.undoManager.add();
+          editorRef.current.setDirty(false);
+        } else if (typeof value === 'string' && value !== editorContent) {
+          const localEditor = editorRef.current;
+          localEditor.undoManager.transact(() => {
+            // inline editors grab focus when restoring selection
+            // so we don't try to keep their selection unless they are currently focused
+            let cursor: Bookmark | undefined;
+            if (!inline || localEditor.hasFocus()) {
+              try {
+                // getBookmark throws exceptions when the editor has not been focused
+                // possibly only in inline mode but I'm not taking chances
+                cursor = localEditor.selection.getBookmark(3);
+              } catch (e) { /* ignore */ }
+            }
+            localEditor.setContent(value as string);
+            if (!inline || localEditor.hasFocus()) {
+              for (const bookmark of [ cursor, valueCursor ]) {
+                if (bookmark) {
+                  try {
+                    localEditor.selection.moveToBookmark(bookmark);
+                    setValueCursor(bookmark);
+                    break;
+                  } catch (e) { /* ignore */ }
+                }
+              }
+            }
+          });
+        }
+        if (Type.isNonNullable(props.disabled)) {
+          const disabled = props.disabled ?? false;
+          setMode(editorRef.current, disabled ? 'readonly' : 'design');
+        }
+      }
+    }
+  }, [ initialValue, inline, props.disabled, value, valueCursor ]);
+
+  return inline ? renderInline() : renderIframe();
+});
+
+Editor.propTypes = EditorPropTypes;
diff --git a/src/main/ts/components/EditorPropTypes.ts b/src/main/ts/components/EditorPropTypes.ts
index 771f1ae3..c7a9181b 100644
--- a/src/main/ts/components/EditorPropTypes.ts
+++ b/src/main/ts/components/EditorPropTypes.ts
@@ -2,13 +2,13 @@ import * as PropTypes from 'prop-types';
 import { IEvents } from '../Events';
 import { IProps } from './Editor';
 
-export type CopyProps<T> = { [P in keyof T]: PropTypes.Requireable<unknown> };
+export type CopyProps<T> = { [P in keyof T]: PropTypes.Requireable<any> };
 
 export type IEventPropTypes = CopyProps<IEvents>;
 
 export interface IEditorPropTypes extends IEventPropTypes, CopyProps<IProps> {}
 
-export const eventPropTypes: IEventPropTypes = {
+export const eventPropTypes = {
   onActivate: PropTypes.func,
   onAddUndo: PropTypes.func,
   onBeforeAddUndo: PropTypes.func,
diff --git a/src/stories/Editor.stories.tsx b/src/stories/Editor.stories.tsx
index 184f2596..da8c1288 100644
--- a/src/stories/Editor.stories.tsx
+++ b/src/stories/Editor.stories.tsx
@@ -1,6 +1,7 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { ArgTypes, StoryObj } from '@storybook/react';
 import React from 'react';
 import { EditorEvent, Events, Editor as TinyMCEEditor } from 'tinymce';
-import { StoryObj } from '@storybook/react';
 import { Editor, IAllProps } from '../main/ts/components/Editor';
 
 const apiKey = 'qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc';
@@ -10,7 +11,7 @@ const initialValue = `
 `.trim();
 
 /** Assigning this on a StoryObj will allow its args to be modified. */
-const argTypes = {
+const argTypes: Partial<ArgTypes<IAllProps>> = {
   // Define arg types that need it, i.e. ones that haven't got a good default:
   plugins: { control: { type: 'text' }},
   toolbar: { control: { type: 'text' }},
@@ -28,7 +29,7 @@ export default {
   }
 };
 
-export const IframeEditor: StoryObj<Editor> = {
+export const IframeEditor: StoryObj<typeof Editor> = {
   args: {
     apiKey,
     initialValue,
@@ -36,7 +37,7 @@ export const IframeEditor: StoryObj<Editor> = {
   argTypes,
 };
 
-export const InlineEditor: StoryObj<Editor> = {
+export const InlineEditor: StoryObj<typeof Editor> = {
   args: {
     apiKey,
     initialValue,
@@ -52,7 +53,7 @@ export const InlineEditor: StoryObj<Editor> = {
   )
 };
 
-export const ControlledInput: StoryObj<Editor> = {
+export const ControlledInputLocalScript: StoryObj<typeof Editor> = {
   render: () => {
     const [ data, setData ] = React.useState(initialValue);
     return (
@@ -61,6 +62,30 @@ export const ControlledInput: StoryObj<Editor> = {
           apiKey={apiKey}
           value={data}
           onEditorChange={(e) => setData(e)}
+          tinymceScriptSrc='../../node_modules/tinymce/tinymce.js'
+        />
+        <textarea
+          style={{ width: '100%', height: '200px' }}
+          value={data}
+          onChange={(e) => setData(e.target.value)}
+        />
+      </div>
+    );
+  }
+};
+
+export const ControlledInput: StoryObj<typeof Editor> = {
+  render: () => {
+    const [ data, setData ] = React.useState(initialValue);
+    return (
+      <div>
+        <Editor
+          apiKey={apiKey}
+          value={data}
+          onEditorChange={(e, _editor) => {
+            setData(e);
+          }}
+          tinymceScriptSrc='../../node_modules/tinymce/tinymce.js'
         />
         <textarea
           style={{ width: '100%', height: '200px' }}
@@ -74,7 +99,7 @@ export const ControlledInput: StoryObj<Editor> = {
 
 // The editor will enforce a value that is given to it.
 // Note that the value must be valid HTML or it will forever correcting it and then rolling back the change.
-export const ControlledInputFixed: StoryObj<Editor> = {
+export const ControlledInputFixed: StoryObj<typeof Editor> = {
   render: () =>
     <Editor
       apiKey={apiKey}
@@ -82,7 +107,7 @@ export const ControlledInputFixed: StoryObj<Editor> = {
     />
 };
 
-export const ControlledInputLimitLength: StoryObj<Editor> = {
+export const ControlledInputLimitLength: StoryObj<typeof Editor> = {
   render: () => {
     const sizeLimit = 50;
     const [ data, setData ] = React.useState('<p>This field can only take 50 characters.</p>');
@@ -124,7 +149,7 @@ export const ControlledInputLimitLength: StoryObj<Editor> = {
   }
 };
 
-export const ToggleDisabledProp: StoryObj<Editor> = {
+export const ToggleDisabledProp: StoryObj<typeof Editor> = {
   render: () => {
     const [ disabled, setDisabled ] = React.useState(true);
     const toggleDisabled = () => setDisabled((prev) => !prev);
@@ -143,7 +168,7 @@ export const ToggleDisabledProp: StoryObj<Editor> = {
   }
 };
 
-export const CloudChannelSetTo5Dev: StoryObj<Editor> = {
+export const CloudChannelSetTo5Dev: StoryObj<typeof Editor> = {
   name: 'Cloud Channel Set To "6-dev"',
   render: () => (
     <div>
diff --git a/src/test/ts/alien/Loader.tsx b/src/test/ts/alien/Loader.tsx
index e34f04da..71ce50df 100644
--- a/src/test/ts/alien/Loader.tsx
+++ b/src/test/ts/alien/Loader.tsx
@@ -1,11 +1,11 @@
+import { before, context } from '@ephox/bedrock-client';
 import { Fun, Optional } from '@ephox/katamari';
 import { SugarElement, SugarNode } from '@ephox/sugar';
+import { VersionLoader } from '@tinymce/miniature';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Editor, IAllProps, IProps, Version } from '../../../main/ts/components/Editor';
 import { Editor as TinyMCEEditor } from 'tinymce';
-import { before, context } from '@ephox/bedrock-client';
-import { VersionLoader } from '@tinymce/miniature';
+import { Editor, IAllProps, IProps, Version } from '../../../main/ts/components/Editor';
 
 // @ts-expect-error Remove when dispose polyfill is not needed
 Symbol.dispose ??= Symbol('Symbol.dispose');
@@ -15,7 +15,7 @@ Symbol.asyncDispose ??= Symbol('Symbol.asyncDispose');
 export interface Context {
   DOMNode: HTMLElement;
   editor: TinyMCEEditor;
-  ref: React.RefObject<Editor>;
+  ref: React.RefObject<HTMLElement>;
 }
 
 const getRoot = () => Optional.from(document.getElementById('root')).getOrThunk(() => {
@@ -32,7 +32,7 @@ export interface ReactEditorContext extends Context, Disposable {
 export const render = async (props: Partial<IAllProps> = {}, container: HTMLElement = getRoot()): Promise<ReactEditorContext> => {
   const originalInit = props.init || {};
   const originalSetup = originalInit.setup || Fun.noop;
-  const ref = React.createRef<Editor>();
+  const ref = React.createRef<HTMLElement>();
 
   const ctx = await new Promise<Context>((resolve, reject) => {
     const init: IProps['init'] = {
diff --git a/src/test/ts/alien/TestHelpers.ts b/src/test/ts/alien/TestHelpers.ts
index da682b97..9f24b4bb 100644
--- a/src/test/ts/alien/TestHelpers.ts
+++ b/src/test/ts/alien/TestHelpers.ts
@@ -48,9 +48,6 @@ const EventStore = () => {
 };
 
 export {
-  VALID_API_KEY,
-  EventStore,
-  VERSIONS,
-  CLOUD_VERSIONS,
-  Version
-};
\ No newline at end of file
+  CLOUD_VERSIONS, EventStore, VALID_API_KEY, Version, VERSIONS
+};
+
diff --git a/src/test/ts/browser/EditorBehaviorTest.ts b/src/test/ts/browser/EditorBehaviorTest.ts
index b06de886..abc71d10 100644
--- a/src/test/ts/browser/EditorBehaviorTest.ts
+++ b/src/test/ts/browser/EditorBehaviorTest.ts
@@ -1,13 +1,13 @@
-import * as Loader from '../alien/Loader';
 import { PlatformDetection } from '@ephox/sand';
+import * as Loader from '../alien/Loader';
 
 import { describe, it } from '@ephox/bedrock-client';
 
+import { Assertions, Waiter } from '@ephox/agar';
+import { TinyAssertions } from '@ephox/mcagar';
+import { EditorEvent, Events, Editor as TinyMCEEditor } from 'tinymce';
 import { getTinymce } from '../../../main/ts/TinyMCE';
 import { EventStore, VERSIONS } from '../alien/TestHelpers';
-import { Editor as TinyMCEEditor, EditorEvent, Events } from 'tinymce';
-import { Assertions } from '@ephox/agar';
-import { TinyAssertions } from '@ephox/mcagar';
 
 type SetContentEvent = EditorEvent<Events.EditorEventMap['SetContent']>;
 
@@ -88,6 +88,9 @@ describe('EditorBehaviourTest', () => {
         using ctx = await render({ initialValue: '<p>Initial Content</p>' });
         await ctx.reRender({ onSetContent: eventStore.createHandler('onSetContent') });
 
+        // Wait for the event handler to register
+        await Waiter.pWait(1);
+
         TinyAssertions.assertContent(ctx.editor, '<p>Initial Content</p>');
         ctx.editor.setContent('<p>New Content</p>');
 
@@ -116,6 +119,10 @@ describe('EditorBehaviourTest', () => {
         ctx.editor.setContent('<p>Initial Content</p>');
 
         await ctx.reRender({ onSetContent: eventStore.createHandler('NewHandler') });
+
+        // Wait for the event handler to register
+        await Waiter.pWait(1);
+
         ctx.editor.setContent('<p>New Content</p>');
 
         eventStore.each<SetContentEvent>('InitialHandler', (events) => {
diff --git a/src/test/ts/browser/EditorInitTest.ts b/src/test/ts/browser/EditorInitTest.ts
index df8fe694..a6750209 100644
--- a/src/test/ts/browser/EditorInitTest.ts
+++ b/src/test/ts/browser/EditorInitTest.ts
@@ -1,10 +1,10 @@
-import { Assertions } from '@ephox/agar';
+import { Assertions, Waiter } from '@ephox/agar';
 import { context, describe, it } from '@ephox/bedrock-client';
 
-import { VALID_API_KEY, VERSIONS } from '../alien/TestHelpers';
-import * as Loader from '../alien/Loader';
 import { TinyAssertions } from '@ephox/mcagar';
 import { IAllProps } from 'src/main/ts';
+import * as Loader from '../alien/Loader';
+import { VALID_API_KEY, VERSIONS } from '../alien/TestHelpers';
 
 const assertProperty = (obj: {}, propName: string, expected: unknown) => {
   Assertions.assertEq(propName.toString() + ' should be ' + expected, expected, (obj as any)[propName]);
@@ -66,14 +66,15 @@ describe('EditorInitTest', () => {
         using ctx = await render({ value: '<p>Initial Value</p>' });
         TinyAssertions.assertContent(ctx.editor, '<p>Initial Value</p>');
         ctx.reRender({ ...defaultProps, value: '<p>New Value</p>' });
-        TinyAssertions.assertContent(ctx.editor, '<p>New Value</p>');
+        await Waiter.pTryUntil('Wait for content to update', () => TinyAssertions.assertContent(ctx.editor, '<p>New Value</p>'));
       });
 
       it('Disabled prop should disable editor', async () => {
         using ctx = await render();
         Assertions.assertEq('Should be design mode', true, '4' === version ? !ctx.editor.readonly : ctx.editor.mode.get() === 'design');
         ctx.reRender({ ...defaultProps, disabled: true });
-        Assertions.assertEq('Should be readonly mode', true, '4' === version ? ctx.editor.readonly : ctx.editor.mode.get() === 'readonly');
+        await Waiter.pTryUntil('Wait for editor to be readonly',
+          () => Assertions.assertEq('Should be readonly mode', true, '4' === version ? ctx.editor.readonly : ctx.editor.mode.get() === 'readonly'));
       });
 
       it('Using an overriden props will cause a TS error', async () => {
diff --git a/src/test/ts/browser/EventBindingTest.ts b/src/test/ts/browser/EventBindingTest.ts
index 5ae3f078..5b492336 100644
--- a/src/test/ts/browser/EventBindingTest.ts
+++ b/src/test/ts/browser/EventBindingTest.ts
@@ -1,5 +1,5 @@
-import { Assert, describe } from '@ephox/bedrock-client';
-import { Arr, Obj, Fun } from '@ephox/katamari';
+import { Assert, describe, it } from '@ephox/bedrock-client';
+import { Arr, Fun, Obj } from '@ephox/katamari';
 import { IAllProps } from 'src/main/ts/components/Editor';
 import { configHandlers2 } from '../../../main/ts/Utils';
 
@@ -34,7 +34,16 @@ describe('EventBindingTest', () => {
 
   const on = (name: string, handler: Handler, _prepend?: boolean) => calls.push({ type: 'on', name, handler });
   const off = (name: string, handler: Handler) => calls.push({ type: 'off', name, handler });
-  const adapter = (lookup: typeof dummyLookupProp, key: string): Handler => ({ key });
+  const adapter = (() => {
+    const cache = new Map<string, Handler>();
+    return (lookup: typeof dummyLookupProp, key: string): Handler => {
+      if (!cache.has(key)) {
+        cache.set(key, { key });
+      }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return cache.get(key)!;
+    };
+  })();
   const dummyLookupProp: any = <K extends keyof IAllProps>(_key: K) => Fun.die('not implemented');
 
   // dummy functions for handlers
@@ -42,41 +51,48 @@ describe('EventBindingTest', () => {
   const blurHandler = Fun.noop;
 
   // check no handlers
-  calls = [];
-  boundHandlers = {};
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  configHandlers2(dummyLookupProp, on, off, adapter, {}, {}, boundHandlers);
-  check({}, []);
+  it('check no handlers', () => {
+    calls = [];
+    boundHandlers = {};
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    configHandlers2(dummyLookupProp, on, off, adapter, {}, boundHandlers);
+    check({}, []);
+  });
 
   // check adding handlers
   // nothing should be removed and the focus and blur handler should be added
-  calls = [];
-  boundHandlers = {};
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  configHandlers2(dummyLookupProp, on, off, adapter, {}, { onFocus: focusHandler, onBlur: blurHandler }, boundHandlers);
-  check({ Focus: 'on', Blur: 'on' }, [ 'onFocus', 'onBlur' ]);
+  it('check adding handlers', () => {
+    calls = [];
+    boundHandlers = {};
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    configHandlers2(dummyLookupProp, on, off, adapter, { onFocus: focusHandler, onBlur: blurHandler }, boundHandlers);
+    check({ Focus: 'on', Blur: 'on' }, [ 'onFocus', 'onBlur' ]);
+  });
 
   // check changing an unrelated property while keeping handlers the same
   // nothing should be added or removed and the bound handlers should stay the same
-  calls = [];
-  boundHandlers = { Focus: adapter(focusHandler, 'onFocus'), Blur: adapter(blurHandler, 'onBlur') };
-  configHandlers2(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    dummyLookupProp,
-    on,
-    off,
-    adapter,
-    { onFocus: focusHandler, onBlur: blurHandler, disabled: true },
-    { onFocus: focusHandler, onBlur: blurHandler, disabled: false },
-    boundHandlers
-  );
-  check({}, [ 'onFocus', 'onBlur' ]);
+  it('check changing an unrelated property while keeping handlers the same', () => {
+    calls = [];
+    boundHandlers = { Focus: adapter(focusHandler, 'onFocus'), Blur: adapter(blurHandler, 'onBlur') };
+    configHandlers2(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      dummyLookupProp,
+      on,
+      off,
+      adapter,
+      { onFocus: focusHandler, onBlur: blurHandler, disabled: false },
+      boundHandlers
+    );
+    check({}, [ 'onFocus', 'onBlur' ]);
+  });
 
   // check removing a handler for Blur while keeping the Focus handler
   // the blur handler should be removed and the focus handler should remain afterwards
-  calls = [];
-  boundHandlers = { Focus: adapter(focusHandler, 'onFocus'), Blur: adapter(blurHandler, 'onBlur') };
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  configHandlers2(dummyLookupProp, on, off, adapter, { onFocus: focusHandler, onBlur: blurHandler }, { onFocus: focusHandler }, boundHandlers);
-  check({ Blur: 'off' }, [ 'onFocus' ]);
+  it('check removing a handler for Blur while keeping the Focus handler', () => {
+    calls = [];
+    boundHandlers = { Focus: adapter(focusHandler, 'onFocus'), Blur: adapter(blurHandler, 'onBlur') };
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    configHandlers2(dummyLookupProp, on, off, adapter, { onFocus: focusHandler }, boundHandlers);
+    check({ Blur: 'off' }, [ 'onFocus' ]);
+  });
 });
diff --git a/yarn.lock b/yarn.lock
index 2867839d..5a8ad3d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5240,6 +5240,11 @@ eslint-plugin-prefer-arrow@^1.2.3:
   resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.3.tgz#e7fbb3fa4cd84ff1015b9c51ad86550e55041041"
   integrity sha512-J9I5PKCOJretVuiZRGvPQxCbllxGAV/viI20JO3LYblAodofBxyMnZAJ+WGeClHgANnSJberTNoFWWjrWKBuXQ==
 
+eslint-plugin-react-hooks@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz#3d34e37d5770866c34b87d5b499f5f0b53bf0854"
+  integrity sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==
+
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -9657,14 +9662,14 @@ tiny-invariant@^1.3.1, tiny-invariant@^1.3.3:
   integrity sha512-okoJyxuPv1gzASxQDNgQbnUXOdAIyoOSXcXcZZu7tiW0PSKEdf3SdASxPBupRj+64/E3elHwVRnzSdo82Emqbg==
 
 "tinymce-7@npm:tinymce@^7":
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.2.1.tgz#9b4f6b5a0fa647e2953c174ac69aa47483683332"
-  integrity sha512-ADd1cvdIuq6NWyii0ZOZRuu+9sHIdQfcRNWBcBps2K8vy7OjlRkX6iw7zz1WlL9kY4z4L1DvIP+xOrVX/46aHA==
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.6.1.tgz#f35990f6e9c2f90220939f545ac032e3d9301b05"
+  integrity sha512-5cHhaAoyyTHfAVTInNfoSp0KkUHmeVUbGSu37QKQbOFIPqxYPhqBiaLm1WVLgoNBYOHRProVc3xzxnNTeWHyoQ==
 
 tinymce@^7.2.1:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.2.1.tgz#9b4f6b5a0fa647e2953c174ac69aa47483683332"
-  integrity sha512-ADd1cvdIuq6NWyii0ZOZRuu+9sHIdQfcRNWBcBps2K8vy7OjlRkX6iw7zz1WlL9kY4z4L1DvIP+xOrVX/46aHA==
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.7.0.tgz#4630c24d6696c58a43a9f5ba131ab331d6feb497"
+  integrity sha512-zDFPXeje5fQIxuYzv9fE6YmjFBQmeB9SU+85ofizIHqCCkbBnDdEWhD5R8rBu9MwdjIQP3aNohgGe9D6JOhNaw==
 
 tinyspy@^2.2.0:
   version "2.2.1"