What I do for write math formulas in react draft wysiwyg?

Question

I many times write about it. But I cannot get any help. How to write equations in react-draft-wysiwyg. I find good solution in [github][1]. But now cdn not work or any npm package i didnt install. It is other problem. But in my project have react-latex, react-tex, equation-editor-react, katex, react-markdown packages. How can I do write math equations use these packages. Now my code this:

import { CalculatorOutlined } from '@ant-design/icons';
import React, { useEffect, useRef, useState } from 'react'
import {Editor} from 'react-draft-wysiwyg'
import EquationEditor from "equation-editor-react";
import PropTypes from 'prop-types';
import { EditorState, Modifier } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import { Modal } from 'antd';
import katex from 'katex'
import Latex from 'react-latex'
export default function TextEditor() {
    const uploadCallback = (file, callback) => {
        return new Promise((resolve, reject) => {
          const reader = new window.FileReader();
          reader.onloadend = async () => {
            const form_data = new FormData();
            form_data.append("file", file);
            resolve({ data: { link: URL.createObjectURL(file) } });
          };
          reader.readAsDataURL(file);
        });
      };
    
    const config = {
        // options:['inline', 'blockType', 'fontSize', 'list'],
        image: { uploadCallback: uploadCallback },
    };
    
    return (
      <Editor  
        toolbar={config}
        toolbarClassName="toolbar-class"
        editorClassName="editor-class"
        wrapperClassName="wrapper-class"
        toolbarCustomButtons={[<AddMath/>]}
    />
  )
}

function AddMath(props){
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [equation, setEquation] = useState("y=x");
    const containerRef = useRef();
    useEffect(() => {
      if(!containerRef.current) return
      katex.render(equation, containerRef.current);
  }, [equation]);

    useEffect(()=>{
        setEquation("y=x")
    },[isModalVisible])
    
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        const {editorState, onChange} = props;
        
        const contentState = Modifier.replaceText(
          editorState.getCurrentContent(),
          editorState.getSelection(),
          equation, // here do this
          editorState.getCurrentInlineStyle(),
        );
        onChange(EditorState.push(editorState, contentState, 'insert-characters'));
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        // and this
        setIsModalVisible(false);
    };
    

    
    return <div>
        <CalculatorOutlined style={{ fontSize: '2rem', cursor: 'pointer' }} onClick={showModal} />
        <Modal title="Add equation" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <EquationEditor
          value={equation}
          onChange={setEquation}
          autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
          autoOperatorNames="sin cos tan"
      />
        </Modal>
    </div>  
}

AddMath.propTypes = {
  onChange: PropTypes.func,
  editorState: PropTypes.object,
}

Here problem handleOk function when add equation inside AddMath component.How to convert this to see math equation? [1]: https://github.com/vrajpal-jhala/rdw-mathjax