const handleOnMouseEnter = () => {
        if (id === 'column8') {
            console.log('OnMouseEnter');
        }
    };
    
    const handleOnMouseLeave = () => {
        if (id === 'column8') {
            console.log('OnMouseLeave');
        }
    };

const [isOver, hoverProps] = useHover({ delayEnter: 400 });
   
    const { renderLayer, triggerProps, layerProps } = useLayer({
        isOpen: isOver,
        container: getPortalElement('TooltipPortal'),
        overflowContainer: true,
        placement,
        possiblePlacements: [
            'top-start',
            'top-end',
            'top-center',
        ],
        snap: true,
        triggerOffset: 4,
        auto: true,
    });

    const layer = isOver
        ? renderLayer(
              <StyledTooltip {...layerProps} role="tooltip">
                  {tooltip}
              </StyledTooltip>
          )
        : null;

    return (
        <StyledTooltipDecorator
            {...triggerProps}
            {...hoverProps}
            onMouseEnter={handleOnMouseEnter}
            onMouseLeave={handleOnMouseLeave}
            id={id}
        >
            {layer}
        </StyledTooltipDecorator>
    );
};