ReactQuill component not appearing in NextJS 13.4.2

'use client'

import dynamic from "next/dynamic"
import { FieldErrors } from "react-hook-form"

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading ...</p>,
})
import 'react-quill/dist/quill.snow.css'

interface QuillEditorProps {
    id: string
    placeholder: string
    onChange: (arg0: string) => void
    value: string
    errors: FieldErrors
}

const modules = {
    toolbar: [
        [{ header: '1' }, { header: '2' }, { header: '3' }, { font: [] }],
        [{ size: [] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [
            { list: 'ordered' },
            { list: 'bullet' },
            { indent: '-1' },
            { indent: '+1' },
        ],
        ['link'],
        ['clean'],
    ],
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    },
}

const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link'
]

const QuillEditor: React.FC<QuillEditorProps> = ({
    id,
    placeholder,
    onChange,
    value,
    errors
}) => {
    return (
        <div className='w-full relative block'>
            <QuillNoSSRWrapper
                theme="snow"
                placeholder={placeholder}
                defaultValue={value}
                value={value}
                onChange={(value) => onChange(value)}
                modules={modules}
                formats={formats}
            />
            {errors[id] ? (
                <p className="mt-2 text-pink-600 text-sm">
                    {errors[id]?.message?.toString()}
                </p>
            ) : <></>}
        </div>
    )
}

export default QuillEditor