React Quill - How do I show the differences between two text versions? - reactjs

Question

I'm currently designing a website with React where the user will work with a text editor. The text editor will already have text in it. The user will make some changes to the text and submit it. I would like to add a button that will show the user the differences between the original text and his new text, like Git but down to individual characters.
I'm currently trying to use Quill for that. I've found a lovely solution to my problem, but it's written in plain JavaScript. I've tried translating it to React by setting the Quill objects in the state:
const [quill_old, set_quill_old] = React.useState(new Quill('#old', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_new, set_quill_new] = React.useState(new Quill('#new', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_diff, set_quill_diff] = React.useState(new Quill('#diff', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
but when initializing the code it gets stuck on the "findDiff" function, on this line:
var oldContent = quill_old.getContents();
and returns an error:
TypeError: Cannot read property 'length' of undefined
Where "undefined" is "quill_old".
When trying to run the page without the function, the page shows properly, but I get multiple errors in the console like this:
quill Invalid Quill container #old
Does somebody know how to properly implement this solution in React? Or has a suggestion on some other library I can use?
Thank you for your time