ReactQuill loses focus

Question

I'm using ReactQuill in my project. pretty newbie using react-quill. I'm using react and nextjs in my project. so I imported react-quill dynamically for preventing server side rendering:-

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

in my component I'm using ReactQuill without any additional settings.

const MyComponent = () => {
    //handleSingleChange method is defined here
    //formData here
    //and any other methods, states
    return (
        <>
            <ReactQuill
                value={formData?.company_page?.about || ""}
                onChange={(e) => handleSingleChange("about", e)}
            />
        </>
    )
}

I've discovered few scenarios:

1. if I use defaultValue the field doesn't get filled with the data from api(it's an edit page)
2. if I use value it fills the field with data from api but for that I have to use that || (or) operator (otherwise it throws delta object error).
3. but using value doesn't let me type anything in the field. it loses focus.
4. If I omit value it lets me type. but i have to show the data.

It will be kind if anybody could help to solve this issue.

Answer 1

in the method handleSingleChange, I was trying to update to state.

const handleSingleChange = (name, value) => {
    setCompanyPage({...companyPage, [name]: value})
    setFormData({...formData, company_page:companyPage})
};

as I was trying to update the companyPage state immediately, it was not working, bCoz in react, state doesn't update immediately.

So I had to take a variable in which I override the companyPage state and later updated it in formData. see below method.

const handleQuillChange = (name, value) => {
    const updatedCompanyPage = {...companyPage, [name]: value};
    setFormData({...formData, company_page: updatedCompanyPage})
}