How do I fix this TypeScript error in the ref Next.js

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)