React onChange logs array with wrong delayed values \ onMouseUp

Question

import React, { useRef, useEffect } from 'react';
import './App.css';
import logo from '../src/logo.svg';
import iink from 'iink-js';

function App() {
    const editorRef = useRef(null);;

    useEffect(() => {
        let editor = editorRef.current;
        editor = iink.register(editorRef.current, {
            recognitionParams: {
                type: 'TEXT',
                server: {
                    applicationKey: "1463c06b-251c-47b8-ad0b-ba05b9a3bd01",
                    hmacKey: "60ca101a-5e6d-4159-abc5-2efcbecce059"
                },
            },
        });
        window.addEventListener('resize', () => {
            editor.resize();
        });

        return () => {
            window.removeEventListener('resize', () => {
                editor.resize();
            });
            editor.close();
        };
    });

    const handleChange = async ({ target }) => {
        if (target.id !== 'editor') return;
        const editorElement = editorRef.current;
        const prompterTextElement = editorElement.children[1].children[1].children[0];
        const wordSpans = prompterTextElement.children ? prompterTextElement.children : null;
        console.log('wordSpans: ', wordSpans); // Logs an HTMLCollection containing the elements.
        
        const wordValues = Array.from(wordSpans).map(wordSpan => wordSpan.innerText);
        console.log(wordValues); // Logs the previous state
    };

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1 className="App-title">Welcome to React</h1>
            </header>
            <div id="editor" ref={editorRef} touch-action="none" onMouseUp={handleChange} ></div>
        </div>
    );
}

export default App;

I tried to get the innerText values out of the editorRef's nested span childs, it logs the HTMLCollection with all of it's child right away but after assigning the needed values into the wordValues from the spans the next log will be delayed (i think) which is causing the false data and a result from before the Array.from() function.

when useEffect rerenders the connection to the iink-js library will drop