React TinyMCE editor state is not updating like a normal input component

I have been at this for a while so any help is appreciated!

I have an rich text editor modal with a input box that contains an existing title, and a TinyMCE editor that contains an existing note entry/body. The input text can be edited, but when changes are made to the text body they are immediately reverted, the state is not being set with the new changes.

export const EditorModalContext = createContext(undefined);

function App() {
    const [openEditor, setOpenEditor] = useState(false);
    const [notes, setNotes] = useState([])
    const [currentNote, setCurrentNote] = useState({
        _id: "",
        title: "",
        entry: "",
    });

    const handleOpenEditor = () => setOpenEditor(!openEditor);

    const editorRef = useRef(null);

    const getNotes = useCallback(async () => {
        try {
            const res = await axios.get("/notes");
            setNotes(res.data);
        } catch (err) {
            console.error(err);
        }
    }, []);

    useEffect(() => {
        getNotes();
    }, [getNotes]);

    const onChange = (e) => {
        setCurrentNote((prev) => {
            let currentNote = { ...prev };
            currentNote[`${e.target.id}`] = e.target.value;
            return currentNote;
        });
    };

    return (
        <div className="flex flex-col gap-4 p-4">
            <Dialog>
                <Input
                    variant="outlined"
                    placeholder="Title"
                    value={currentNote.title}
                    id="title"
                    onChange={onChange}
                />
                <Editor
                    tinymceScriptSrc="/tinymce/tinymce.min.js"
                    onInit={(evt, editor) => (editorRef.current = editor)}
                    disableEnforceFocus={true}
                    value={currentNote.entry}
                    id="entry"
                    onChange={onChange}
                />
            </Dialog>
            <EditorModalContext.Provider value={{ setOpenEditor, setCurrentNote }}>
                <Header />
                <NoteCards notes={notes} />
            </EditorModalContext.Provider>
        </div>
    );
}

export default App;

This is more or less the code with some unecessary bits removed. The currentNote is first set in another component and is passed as context when the editor modal is opened using a button in that component.

Does this have something to do with how TinyMCE designed its editor or do I have a runtime error somewhere in my code?