React Quill custom module value - react-quill

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';