CodeMirror MergeView Re-rendering in Response to New Props


I am a new coder currently trying to build a text diff site for a project. The setup currently is having a MergeView component be rendered in React in response to an onClick event. The MergeView takes in the text of two other editors as props and presents the differences. Although this works on the first click, the MergeView does not re-render with the new props on subsequent clicks, even though the props (code) has changed. Would anyone be able to tell me what is wrong with my code? Please let me know if any additional detail is necessary.

The form that is rendering the MergeView:

const DiffForm = () => {
    const [leftCode, setLeftCode] = useState('');
    const [rightCode, setRightCode] = useState('');

    const [contentLoad, setContentLoad] = useState(

    function handleClick () {
            <DiffEditor leftCode={leftCode} rightCode={rightCode} />

    return (
        <div className='form-container'>
            <form className='diff-form'>
                        editorName='Original Text'
                        editorName='Altered Text'
                <div className='button-container'>
                    <button className='diff-button' onClick={handleClick}>Compare</button>

The MergeView file:

const DiffEditor = (props) => {
    const { leftCode, rightCode } = props;

    useEffect(() => {
        const diff = CodeMirror.MergeView(document.getElementById('dv'), {
            value: rightCode,
            origLeft: leftCode,
            lineNumbers: true,
            highlightDifferences: true,
            showDifferences: true,
            revertButtons: false,
            connect: 'align',
            readOnly: true,
            lineWrapping: true

        console.log('proprety has changed', leftCode);
    }, [leftCode, rightCode])

        <div id='dv'>