ReactQuill onChange is being called a lot of times on Function based Component - react-quill

Question

I'm using React Quill on my function-based component, but I'm having problems when I load content to it, I mean the onChange is called for several times in a row (100 times +) for no reason, this only happens when I pass value to it and load the value from data I parse and add to the editor.
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import './Editor.local.css';
const Editor = ({ method, ...props }: any): any => {
return (
<pre style={{ width: '100%' }}>
<label className="llabel">{props.label}</label>
<ReactQuill
value={props.value}
onChange={(value: any) => method(value, props.index)}
modules={Editor.modules}
formats={Editor.formats}
bounds={'#root'}
placeholder={props.placeholder}
/>
</pre>
);
};
Editor.modules = {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline'],
[{ list: 'ordered' }, { list: 'bullet' }],
['link'],
['clean']
],
clipboard: {
matchVisual: false,
},
};
Editor.formats = [
'bold',
'italic',
'underline',
'blockquote',
'list',
'bullet',
'link',
'image',
'header',
'strike',
'size',
'color',
'font',
'align',
'clean',
'direction',
'rtl'
];
export default Editor;
As per the load, just simply I add it to the item and show multi by items with description.