tinymce is not working with react hook form

Question

I am using TinyMCE markdown editor with react Hook Form inside NextJS typescript project. TinyMCE works fine if I am using it without react-hook-form.

I am getting issues while using it with react-hook-form. I can see editorRef.current.getContent() Html data output. But data output is empty object.

Any ideas what might be wrong here?

import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { useForm } from 'react-hook-form';

export default function App() {
  const editorRef = useRef<any>(null);
  const { register, handleSubmit } = useForm();  

  const submitData = (data) => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
    console.log(data);
  };
  
  return (
    <>
      <form onSubmit={handleSubmit(submitData)}>
        <Editor
          onInit={(evt, editor) => (editorRef.current = editor)}
          initialValue=""
          init={{
            height: 500,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount',
            ]
          }}
        />
        <input type="submit" />
      </form>
    </>
  );
}

Answer 1

I've had success using RHF Controller wrapper (v7.25) around tinyMCE Editor (v5.10) if that helps