How to integrate Editor in Reactjs

Question

I am working on Reactjs and i am using Nextjs framework,Right now i am tyring to integrate "Tinymce" editor in my project,Right now i want to get editor value inside "formsubmit", How can i do this? Here is my current code

const editor = useRef();
 
 const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
        const name = e.target.name.value //getting name value from "form"
        const cat_name = e.target.cat_name.value; //getting value from "form"
        if (editor.current) {
                 const content = editor.current.getContent();
                    alert('content is' +content); // Trying to get value of editor
                 }
 };
 
 <Editor
            onInit={(evt, ed) => {
                setEditor(ed);
               }}
            initialValue="<p>This is the initial content of the editor.</p>"
            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'
              ],
              toolbar: 'undo redo | formatselect | ' +
              'bold italic backcolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent | ' +
              'removeformat | help',
              content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            }}
      />
 return (
    <>
        <form className="forms-sample" onSubmit={handleSubmit}>
         <Editor />
         <button type="submit" className='btn btn-primary mr-2'>Submit </button>
         </form>
    </>

Answer 1

// make sure you have imported tiny mce 
// something like import Editor from "tiny-mce";

const MyEditor = () => {

    const editorRef = useRef();

    const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
        const name = e.target.name.value //getting name value from "form"
        const cat_name = e.target.cat_name.value; //getting value from "form"
        if (editorRef.current) {
            const content = editorRef.current.getContent();
            alert('content is' + content); // Trying to get value of editor
        }
    };

    return (
        <>
            <form className="forms-sample" onSubmit={handleSubmit}>
                <Editor
                    onInit={(evt, editor) => editorRef.current = editor}
                    initialValue="<p>This is the initial content of the editor.</p>"
                    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'
                        ],
                        toolbar: 'undo redo | formatselect | ' +
                            'bold italic backcolor | alignleft aligncenter ' +
                            'alignright alignjustify | bullist numlist outdent indent | ' +
                            'removeformat | help',
                        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                    }}
                />
                <button type="submit" className='btn btn-primary mr-2'>Submit </button>
            </form>
        </>
    )
}