Cómo eliminar el color de resaltado del texto con CSS

Estoy construyendo un editor de notas en el que todo está estructurado en términos de bloques, por lo que cuando el usuario selecciona varios bloques, es decir, varios párrafos, estoy mostrando una superposición azul sobre el contenedor de la caja del bloque similar a notion.so, pero lo que quiero que hacer es cuando muestro la superposición azul Quiero eliminar el color de resaltado del texto (El resaltado azul cuando selecciona el texto) He intentado que el usuario no seleccione ninguno, pero no funciona ya que la clase se agrega después, I ' También lo he intentado, -webkit-tap-highlight-colorpero tampoco parece funcionar.

Demostración: https://www.awesomescreenshot.com/video/4910570?key=905d37aa5750ac2ef7055097c33b6f2b

Sandbox: https://codesandbox.io/s/react-playground-forked-vgel5?file=/Paragraph.js

import React from "react";

import { Popover } from "antd";
import GrabMenu from "../GrabMenu/GrabMenu";

import grabIcon from "../../icons/noteeditor/grab-icon.svg";
import { useSelected, useSlateStatic } from "slate-react";
import showSelectedHalo from "../../utils/showSelectedHalo";
import getClassNameForStyling from "../../utils/getClassNameForStyling";

const Paragraph = (props) => {
  const selected = useSelected();
  const editor = useSlateStatic();

  return (
    <div {...props.attributes} className="paragraph-block block">
      <div className="grab-icon-container" contentEditable={false}>
        <img
          src={grabIcon}
          className="grab-icon"
          onClick={props.clearSelection}
        />
      </div>
// The blue overlay
      <div
        className={
          showSelectedHalo(editor, selected, props.element) || props.allSelected
            ? "block-selected-halo block-selected"
            : "block-selected-halo"
        }
        contentEditable={false}
      ></div> 
// Text
      <p className={`${getClassNameForStyling(props).trim()}`}>
        {props.children}
      </p>
    </div>
  );
};

export default Paragraph;