react-quill How do I insert <div> in the editor

Hi there. I'm having problems inserting

in quill editor when click a button in toolbar. It seems like my html tag has been distorted (e.g. styles got removed, div appeared as p, etc.)

I also used this.quill.clipboard.dangerouslyPasteHTML to deal with my html code. Below is the code snippet. Any helps will be highly appreciated. Thanks.

import React, { useState } from 'react'
//stop server side rendering when using react quill with next js
import dynamic from 'next/dynamic'
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
import CustomToolbar from '../../quill/CustomToolbar'



function htmlInsert(){
    const cursorPosition = this.quill.getSelection().index
    console.log(cursorPosition)
    const html = `<div style="padding:100px; border: 2px solid black;">
                        <h1 style="display:block; color: red; width:100px;">this is new text</h1>
                    </div>`
    this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, html)
}



const QuillEditor = ()=>{
    const [value, setValue] = useState('')

    const modules = {
        toolbar:{
            container:'#toolbar',
            handlers:{
                insertStar: insertStar,
                htmlInsert: htmlInsert,
            }
        },
    }

    return (
        <>
            <div className='container'>
                <div className='ql-editor' style={{backgroundColor:'white', color:'black'}}>
                    <CustomToolbar value={value} clickFunc={insertStar}/>
                    <ReactQuill
                        theme='snow'
                        value={value}
                        onChange={setValue}
                        modules={modules}
                        placeholder='type something'
                    />
                </div>
                <br/>
            </div>

        </>
    )
}
export default QuillEditor