create new module for quill ReactJs

everyone, I create this component but I just want to add (hr) tag to my text editor (quill react) but I've no idea how to do it with registration and its dependency any help? (USING FUNCTION COMPONENT)

https://github.com/zenoamaro/react-quill#default-toolbar-elements

import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';

and there is my component:

Editor.modules = {
  toolbar: [
    [{ font: [] }],
    [{ size: ['small', false, 'large', 'huge'] }],
    ['bold', 'italic', 'underline', 'strike',], // toggled button
    [
      { list: 'ordered' },
      { list: 'bullet' },
      { align: [] },
      { direction: 'rtl' },
    ],
    [{ script: 'sub' }, { script: 'super' }, 'formula'], // superscript/subscript
    ['link', 'image', 'video'],
    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    ['clean'], // remove formatting button
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  },
};

export default function Editor() {
  const [ content, setContent] = React.useState('');

  const handleChange = (html) => {
    setContent(content: html );
   
  };

  return (
    <div className={styles.ArticlesQuill}>
      <ReactQuill
        theme='snow'
        onChange={handleChange}
        value={content}
        modules={Editor.modules}
        bounds={'.app'}
        placeholder='type something here...'
      />
    </div>
  );
}

Thank you