CodeMirror MergeView Re-rendering in Response to New Props

Hello,

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(
        <div></div>
    );

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

    return (
        <div className='form-container'>
            <form className='diff-form'>
                    <Editor
                        editorName='Original Text'
                        value={leftCode}
                        onChange={setLeftCode}
                    />
                    <Editor
                        editorName='Altered Text'
                        value={rightCode}
                        onChange={setRightCode}
                    />
                <div className='button-container'>
                    <button className='diff-button' onClick={handleClick}>Compare</button>
                    {contentLoad}
                </div>
            </form>
        </div>
    )
}

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])

    return(
        <div id='dv'>
        </div>
    )
};