How to prevent suggest duplications between editors on single page?

Question

I have monarch editor with custom language and suggestions

Here is how I define suggestions for component

export const RuleInput = (props) => {
    ...

    useEffect(() => {
        if (!isMonacoMounting) {
            completionRef?.current?.dispose();
            completionRef.current = monacoRef?.current?.languages?.registerCompletionItemProvider(langName, {
                triggerCharacters: [' '],
                provideCompletionItems: (model, position) => {
                    const word = model.getWordUntilPosition(position);
                    const range: IRange = {
                        startLineNumber: position.lineNumber,
                        endLineNumber: position.lineNumber,
                        startColumn: word.startColumn,
                        endColumn: word.endColumn,
                    }
                    const suggests: CompletionItem[] = getSuggestions({position: position.column}).map(k => ({
                        label: k,
                        kind: CompletionItemKind.Keyword,
                        insertText: k,
                        range
                    }))
                    return {
                        suggestions: suggests
                    }
                },
            }) || null;
        }
    }, [monacoRef, isMonacoMounting, completionRef, getSuggestions])

    ...

        <div className="App">
            <div className='container m-auto'>
                <div className={classNames({ 'invisible': !isEditorReady })}>
                    <span className='text-md font-bold text-left w-full flex'>{label}</span>
                    <div
                        // @ts-ignore
                        ref={containerRef}
                        id={editorId}
                        className='w-full border rounded-xl text-left p-1'
                    />
                    <span className='text-gray-600 text-left w-full block text-xs'>Type <span className='font-bold'>space + space</span> to trigger suggests</span>
                </div>
            </div>
        </div>

}

1. If I call this component once per page everything is ok

        <div className='border rounded-xl p-3 flex flex-col gap-3'>
            <RulesInput
                editorId='formulae-1'
                label='Formulae'
                value={formulaeValue}
                onChange={(value) => setFormulaeValue(value)}
                factKeywords={getFactKeywords}
                operationsKeywords={getOperationKeywords}
                getSuggestions={getFormulaeSuggestsSuggests}
            />
        </div>

enter image description here

2. But if I put more than one component then suggestions are duplicated

        <div className='border rounded-xl p-3 flex flex-col gap-3'>
            <RulesInput
                editorId='predicate-1'
                label='Predicate'
                value={predicateValue}
                onChange={(value) => setPredicateValue(value)}
                factKeywords={getFactKeywords}
                operationsKeywords={getOperationKeywords}
                getSuggestions={getPredicateSuggestsSuggests}
            />
            <RulesInput
                editorId='formulae-1'
                label='Formulae'
                value={formulaeValue}
                onChange={(value) => setFormulaeValue(value)}
                factKeywords={getFactKeywords}
                operationsKeywords={getOperationKeywords}
                getSuggestions={getFormulaeSuggestsSuggests}
            />
        </div>

enter image description here

So how to incapsulate this logic for each editor?

So I do not have any ideas because I thought that each component will have own suggestions because I have different states for that