[Dúvida] Gostaria de saber se é possível travar o foco da seleção de um texto web??? (meu texto perde o foco da seleção)

**Oi pessoal, estou implementando uma biblioteca de ColorPicker para um editor de páginas. Estou tentando obter a seleção atual de um texto específico. No entanto, o que acontece é que quando vou mudar o valor da cor em formato hexadecimal ou RGB, ele acaba perdendo o foco da seleção e fica como uma string vazia, não permanecendo selecionado. O que resulta na não troca de cor. **

Estou utilizando o window.getSelection().toString().trim() para selecionar o texto em especifico.

**Gostaria de saber se é possível travar o foco da seleção???. **

Tentei resolver utilizando as seguintes opções: 1- Pegando a div, porém não funcionou, não tem como pegar a posição que o texto se encontra (as divs variam dependendo da posição do bloco) 2- Utilizando a função getSelection. A função getSelection é muito instável, qualquer clique ela acaba perdendo o foco no texto. 3-Armazenando o valor. Não tem como armazenar o valor também pq preciso que o texto esteja selecionado, e mesmo armazenando o valor. Não vai ser mudado o texto. ( precisa da seleção)

Biblioteca utilizada: react-pick-color.

Parte do código da validação:

useEffect(() => {
    const handleSelectionChange = () => {
      const selectedText = window.getSelection().toString().trim();
      if (selectedText != "") {
        setOpenTextProperties(true);
      } else {
        setOpenTextColor(false);
        setOpenHighlighter(false);
        setOpenTextProperties(false);
      }
    };
    document.addEventListener("mouseup", handleSelectionChange);
    document.addEventListener("selectionchange", handleSelectionChange);
    return () => {
      document.removeEventListener("mouseup", handleSelectionChange);
      document.removeEventListener("selectionchange", handleSelectionChange);
    };
  }, []);