I have a basic setup for a Quill text editor. I want to figure out the config needed for Quill to be read only with prefilled content so that the editor's content is static and the toolbar should be removed.

When I try to change the config with new quill(editor, {configs}); the editor goes away and I'm left with a blank screen. When I used the same exact code on a separate web app the text editor's toolbar was removed but the content was not prefilled and it was still able to be edited.

I've been quite lost looking through the Quill documentation so I appreciate any ideas to get me back on track. Thank you for your time!

import { useCallback} from "react";
import quill from "quill";
import "quill/dist/quill.snow.css";
export default function TextEditor() { 
    const wrapperRef = useCallback(wrapper => {
        if (wrapper == null) return 
        let configs = {  theme: 'snow', readOnly: true, placeholder: 'HELLO!!!' };
        wrapper.innerHTML = ""
        const editor = document.createElement
        ("div")
        wrapper.append(editor);
        new quill(editor, {theme: "snow"});
    } , []); 
    return (
        <div>
    <div   className="container" ref={wrapperRef }/>
    </div>
    )
}