How can I set the initial value in quilljs so that the string retains its original styling as a starting point and edit from there

Question

I am using quilljs to add a rich text editor in React. I am pre-filling the data for editing right now using: quill.clipboard.dangerouslyPasteHTML(placeholder);

this does so as an unstyled block of text...

i.e: instead of a plain block of text....

**

I would like to fill the editor with the previous styling that is already there from the original designer or potential previous edits.

** does anyone know of a better way or format to prefill the data so that I start with the styling already provided and go from there. I'd really appreciate any guidance.

export default function RichTextEditor ({getHtml, placeholder, styles}:{getHtml: ()=> void, placeholder: string, styles: {width:number, height: number, marginBottom: number} }){
    const modules = {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          [{ list: 'ordered'}, { list: 'bullet' }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }],
          ['clean'],
        ],
      };
    const { quill, quillRef } = useQuill({modules});
    const [value, setValue] = useState<string | undefined>(placeholder)

 
    useEffect(() => {
        if (quill) {
         
          quill.clipboard.dangerouslyPasteHTML(placeholder);
          quill.on('text-change', () => {
      
            setValue(quill.root.innerHTML); // Get innerHTML using quill
            console.log(quillRef.current.firstChild.innerHTML); // Get innerHTML using quillRef
          });
        }
      }, [quill]);
      console.log(value)
   
    return(   <div style={styles}>
        <div ref={quillRef} />
        
      </div>)
}