Can't get an example for React useMutationObserver hook to run - reactjs

Question

I need to check the mutation of an react component in my app that I am developing. So I looked around for solutions for that and found this example. To learn how it works I am trying to implement it in my own app: https://www.30secondsofcode.org/react/s/use-mutation-observer
I have created a blank new React app but I can't get it to run like it does in the codepen provided on the site.
1st. ref is missing as a dependency in the useEffect hook, so I added it.
2nd. It does nothing, it updates the text output in <p>{content}</p> but it keeps staying on mutationCount: 0
Here my App.js
import React from "react";
const useMutationObserver = (
ref,
callback,
options = {
attributes: true,
characterData: true,
childList: true,
subtree: true,
}
) => {
React.useEffect(() => {
if (ref.current) {
const observer = new MutationObserver(callback);
observer.observe(ref.current, options);
return () => observer.disconnect();
}
}, [callback, options, ref]); //added ref here
};
const App = () => {
const mutationRef = React.useRef();
const [mutationCount, setMutationCount] = React.useState(0);
const incrementMutationCount = () => {
return setMutationCount(mutationCount + 1);
};
useMutationObserver(mutationRef, incrementMutationCount);
const [content, setContent] = React.useState('Hello world');
return (
<>
<label htmlFor="content-input">Edit this to update the text:</label>
<textarea
id="content-input"
style={{ width: '100%' }}
value={content}
onChange={e => setContent(e.target.value)}
/>
<div
style={{ width: '100%' }}
ref={mutationRef}
>
<div
style={{
resize: 'both',
overflow: 'auto',
maxWidth: '100%',
border: '1px solid black',
}}
>
<h2>Resize or change the content:</h2>
<p>{content}</p>
</div>
</div>
<div>
<h3>Mutation count {mutationCount}</h3>
</div>
</>
);
};
export default App;
What is different in my app?

Answer 1

A new instance of callback and options is created every time App component re-renders, making the useEffect callback function running on every change. You can remove them from the dependency list and make sure that useEffect block will run after component is mounted or if ref changes only:
const useMutationObserver = (
ref,
callback,
options = {
CharacterData: true,
childList: true,
subtree: true,
attributes: true,
}
) => {
React.useEffect(() => {
if (ref.current) {
const observer = new MutationObserver(callback);
observer.observe(ref.current, options);
return () => observer.disconnect();
}
}, [ref]);
};
Working Example
Another solution is to keep callback and options reference with no changes.