React Quill custom module value

Question

I'm trying to create a custom module that attaches a class to the html element and uses the value that is inside the static create function to add it to the dataset.

so what I do is:

• write some text
• click the button

Expected Behaviour

: The text gets wrapped in a bold tag with class "bold" and data-id=1

Result:

The text gets wrapped in a bold tag with

• class "bold"
• data-id=1.

Then the Placeholder create function is called once again with value = true, so the value changes to

• class "bold"
• data-id=true.

Does anybody know why this happens? Why is the Placeholder create function called twice? Also, I suspect this is something related to react, because I tried it on a simple js example and this doesn't happen

import ReactQuill,{Quill} from 'react-quill'
import Bold from "./Bold.ts"
Quill.register(Bold);

const Editor = () => {

    const ref = useRef();

    const [value, setValue] = useState("");
  
    const modules = {
        toolbar: [
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline','strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            [{ 'color': [] }, { 'background': [] }],
            ['clean']
        ],
    }


    const onChange = (content:any, delta:Delta) => {
        setValue(content)
    }

    useEffect(()=>{
       console.log("value is changing:", value)
    },[value])

    // @ts-ignore
    const format = ()=>ref.current.editor.formatText(0,ref.current.editor.getText().length,"mybold", 1)
    
    return (
        <div>
            <Button onClick={format} >style me</Button>
            <ReactQuill ref={ref as LegacyRef<any>} modules={modules} theme="bubble" value={value} onChange={onChange}/>
        </div>

    );
}

Bold.ts

import Quill from "quill";

let Inline = Quill.import('blots/inline');

export default class Bold extends Inline {
    static create(value:any){
        const node = super.create()
        console.log("value", value)
        node.setAttribute("class","bold")
        node.dataset["id"]= value
        return node
    }
}
Bold.blotName = 'mybold';
Bold.tagName = 'bold';