This is my TextEditor.js. I am willing to use it wherever I want it but when I use this component I am wishing to get the value associated with it every time it's state gets change.

import React, { Component } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";

export default class TextEditor extends Component {
    state = {
        editorState: EditorState.createEmpty(),
    };

    onEditorStateChange = (editorState) => {
        this.setState({
            editorState,
        });
    };

    render() {
        const { editorState } = this.state;
        console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));

//I want to get draftToHtml(convertToRaw(editorState.getCurrentContent())) whenever I call this component

        return (
            <div>
                <Editor
                    editorState={editorState}
                    toolbarClassName="toolbarClassName"
                    wrapperClassName="wrapperClassName"
                    editorClassName="editorClassName"
                    onEditorStateChange={this.onEditorStateChange}
                />
     
            </div>
        );
    }
}

I want to use it in below component. I want to use it so that I can get the value whenever its state get changed and I can save the data.

import React, {useState} from 'react';
import axios from "axios"

import ReactDOM from 'react-dom';
import {Editor, EditorState,RichUtils} from 'draft-js';
import 'draft-js/dist/Draft.css';
import TextEditor from '../TextEditor';

function AddBlog() {
    

  return <div>
      <h3 className='text-center my-3'>
            Add blog
      </h3><hr/>
      <div className='col-lg-6 mx-auto'>
      <form>
 
  <div class="mb-3 border p-2 rounded-3">
    <label for="exampleInputPas1" class="form-label">Description</label>
    <input type="text" hidden  value={desc} onChange={(e)=>setDesc(e.target.value)} class="form-control" id="exampleInputrd1" />
    <div className="editor">

        <TextEditor  />
//I want the value from TextEditor so that I can save it.
      </div>
 
  </div>
  
  <div className='d-flex justify-content-end'>

  <button type="submit" onClick={submitForm} class="btn btn-danger btn-sm">Add</button>
  </div>
</form>

      </div>

  </div>;
}

export default AddBlog;

So how can I get the value form TextEditor.js to AddBlog.js so that I can save it.