How to make the Antd tooltip box disappear after hovering over it?

We are using the tooltips from the Ant Design project. We want these tooltips to be disappeared after hovering it.

import React, { useState } from 'react';
import styled from 'styled-components';
import { Tooltip } from 'antd';
import Highlighter from 'react-highlight-words';

const TooltipText = ({
  children,
  className,
  tabIndex,
  fontSize,
  padding,
  highlightWord,
  style = { 'white-space': 'nowrap' },
  toolTipPlacement = 'top',
  clickable = true,
  onClick,
}) => {
  const [truncated, setTruncated] = useState(false);
  const updateOverflow = e => {
    const el = e.currentTarget;
    if (el.classList.contains('detail-location')) {
      const canvasContext = document.createElement('canvas').getContext('2d');
      if (
        Math.ceil(canvasContext.measureText(el.innerText).width) >
        2 * el.clientWidth
      )
        setTruncated(true);
    } else if (!truncated && el.scrollWidth > el.clientWidth) {
      setTruncated(true);
    }
  };
  return (
    <Tooltip
      title={truncated ? children : undefined}
      className={className}
      placement={toolTipPlacement}
    >
      <TextDiv
        onMouseEnter={updateOverflow}
        tabIndex={tabIndex}
        fontSize={fontSize}
        padding={padding}
        clickable={clickable}
        onClick={onClick}
        style={style}
      >
        <Highlighter
          textToHighlight={children || ''}
          searchWords={[highlightWord]}
          autoEscape
        />
      </TextDiv>
    </Tooltip>
  );
};

const TextDiv = styled.div`
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: ${props => props.fontSize || '0.69rem'};
  letter-spacing: 0;
  line-height: 1.06rem;
  padding: ${props => props.padding || '0'};
  & mark {
    background-color: rgba(255, 249, 0, 0.5);
    padding: 0;
  }
  &:hover {
    text-decoration: ${props => (props.clickable ? 'underline' : 'none')};
  }
`;

I played with the CSS properties 'ant-tooltip-inner, ant-tooltip-arrow, ant-tooltip', but it did not work. I added the 'hover' to the CSS propertied but it does not change anything. In the chrome DevTools, I put the 'hover' property into the CSS but it says that it is unknown property. I would be appreciated if you give the advise.