How to use quilljs-markdown in reactjs

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?