This ref is returning a typeScript error and I don’t know how to fix it. the code works on local enviroment but is getting the error in the deploy process
const [quill, setQuill] = useState<any>(null)
const wrapperRef = useCallback(async (wrapper: any) => {
if (typeof window !== 'undefined') {
if (wrapper === null) return
wrapper.innerHTML = ''
const editor = document.createElement('div')
wrapper.append(editor)
const Quill = (await import('quill')).default
const QuillCursors = (await import('quill-cursors')).default
Quill.register('modules/cursors', QuillCursors)
const q = new Quill(editor, {
theme: 'snow',
modules: {
toolbar: TOOLBAR_OPTIONS,
cursors: {
transformOnTextChange: true,
},
},
})
setQuill(q)
}
}, [])
<div id="container" className="max-w-[800px]" ref={wrapperRef} />
Here is the error message
Type (wrapper: any) => Promise<void> is not assignable to type LegacyRef<HTMLDivElement> | undefined. Type (wrapper: any) => Promise<void> is not assignable to type (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly). Type Promise<void> is not assignable to type void | (() => VoidOrUndefinedOnly)