how to unselect the highlight area in codemirror6

1

I have alreay enable the user select area highlight, now when the user cursor remove alway from the highlight area, I need to make the highlight disappear, I have alreay tried to follow the official document CodeMirror 5 to 6 Migration Guide like this:

const highlightUnselection = () => {
    if (!curEditorView) {
        return;
    }
    const filterMarks = StateEffect.define();
    curEditorView.dispatch({
        effects: filterMarks.of(null)
    })
}

but it seems did not work. This is my highlight code look like:

const hightlightSelection = (from: number, to: number) => {
    if (!curEditorView) {
        return;
    }
    const highlight_decoration = Decoration.mark({
        attributes: { style: "background-color: yellow" }
    });
    curEditorView.dispatch({
        effects: highlight_effect.of([highlight_decoration.range(from, to)])
    });
}

this is how I triggered the highlight and unhighlight:


    EditorView.updateListener.of(function (e) {
        //  input/update/change event
        let selection = e.state.selection;
        let start = selection.ranges[0].from;
        let end = selection.ranges[0].to;
        if (start < end && (curStart !== start || curEnd !== end)) {
            clearCount = 0;
            curStart = start;
            curEnd = end;
            hightlightSelection(start, end)
        }
        if(start === end && clearCount<2) {
            clearCount = clearCount + 1;
            highlightUnselection();
        }
    })

Am I missing something? what should I do to make the highlight reset when the cursor move alway from the highlight text area?