ShowHint on text selection (via mouse or key)

1

I am unable to have showHint display the “list” with the following code. It works for a keyhandler, but not for the mouseUp even though the editor instance is the same.

    const initEditor = (editor) => {
        editorRef.current = editor;
        editor.on('keypress', handleKeyPress);
        // Attach the mouseup event to the CodeMirror component's DOM element
        editor.getWrapperElement().addEventListener('mouseup', handleMouseUp);
    };

    const handleMouseUp = () => {
        if (editorRef.current.getSelection().length > 3) {
            const selectedPhrase = editorRef.current.getSelection();
            // add 1 second delay to allow the editor to update the selection
            setTimeout(() => {
                showHintWithSpace(editorRef.current, [`add to glossagy (${selectedPhrase})`]);
            }, 1000);

        }
    }

const showHintWithSpace = (cm, options) => {
        console.log('showHintWithSpace', cm);
        cm.showHint({
            completeSingle: false,
            hint: () => {
                return {
                    list: options.map(option => `${option}`),
                    from: cm.getCursor(),
                    to: cm.getCursor(),
                };
            },
        });
    }

I am using react-codemirror2 v7.3

Thank for your support