I want to perform syntax highlighting in the Code Editor component below

Question

    const [currCode, setCurrCode] = useState(``);
    const keywords = ['class', 'int', 'string', 'public', 'static', 'void', 'return'];
    const highlightKeywords = (text) => {
        var code = keywords.reduce((acc, keyword) => {
            const regex = new RegExp(`\\b${keyword}\\b`, 'g');
            return acc.replace(regex, (match) => `<span style="color: yellow;">${match}</span>`);
        }, text);
        return code;
    }
    const handleCodeChange = (e) => {
        setCurrCode(highlightKeywords(e.target.value));

    }

<ContentEditable
            html={currCode}
            tagName="pre"
            onChange={handleCodeChange}
        />

I want to implement syntax highlighting in the Editor component below. I wrote this code, and it highlights the code, but when I try to change the code, the cursor jumps to the bottom.