How to use quilljs-markdown in reactjs - reactjs

Question

I need such an editor on react https://cloverhearts.github.io/quilljs-markdown/ , as you can see in it you can put markdown characters directly into the text.
import React from "react";
import ReactQuill, {Quill} from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const QuillMakrdown = require('quilljs-markdown');
interface UIQuillEditorDemoProps { }
interface UIQuillEditorDemoState { text: string; }
export class UIQuillEditorDemo extends React.Component<UIQuillEditorDemoProps, UIQuillEditorDemoState> {
constructor(props: UIQuillEditorDemoProps) {
super(props);
this.state = { text: "" }
}
handleChange = (text: any) => {
this.setState({ text });
}
modules = {...}
formats = [...]
convertToMarkdown() {
// const turndownService = new TurndownService();
// this.setState({ text: turndownService.turndown(this.state.text) });
const editor = new Quill('#editor', {
theme: 'snow'
})
new QuillMakrdown(editor);
}
render() {
return (
<div className='d-flex flex-column'>
<ReactQuill style={{ height: '300px', marginBottom: '50px' }}
theme="snow" modules={this.modules} formats={this.formats}
placeholder={"Write something..."}
onChange={this.handleChange}
/>
<div>
<Button onClick={() => this.convertToMarkdown()}>Convert To Markdown</Button>
<div id="editor"></div>
<RenderToMarkDown text={this.state.text} />
</div>
</div>
);
}
}
I found https://www.npmjs.com/package/react-quill this quilljs for react, but I don't know how to combine it with markdown https://www.npmjs.com/package/quilljs-markdown can anyone help?