How can I dynamically create Quill editors based on the amount of notes in an array?

Question

import React, { useEffect} from 'react'
import "./Notes.css"
import * as Quill from 'quill'


function Notes() {
    const numberOfNotes = localStorage.length


    function getNotes() {
        var notes = []
        for (var i = 0; i < localStorage.length; i++){
            notes.push(localStorage.getItem(localStorage.key(i)));
        }
        notes.map(note => {
            const editor = document.createElement("div")
            const q = new Quill(editor, {theme: "snow"})
            q.setContents(note, "user")
            return q
        })
    }
        
    return (
        <div className="notes">
            <div className="notes_header">
                <p>You have {numberOfNotes} notes</p>
            </div>

            <div>
               {getNotes()}
            </div>
        </div>
    )
}

export default Notes

I am trying to allow users to save notes in localstorage, and then retrieve, and populate a quill editor for each note in localstorage.

When I run this code I get the following error which I am having trouble understanding.

TypeError: Cannot read property 'insertBefore' of null