Компонент React Tooltip с TypeScript получает ошибку «Возможно, не определено» в моем элементе useRef, но не уверен, как это исправить.

Question

У меня есть простой функциональный компонент React для многократного использования всплывающей подсказки, над которой я работаю, и у меня почти все готово для тестирования, но я получаю ошибку TypeScript «Возможно, не определено» в моем элементе useRef node в этой строке в моей функции: if (node.current.contains(target))... и я не знаю, как это исправить.

Сначала я попытался установить тип useRef следующим образом:

const node = useRef()<HTMLDivElement>(null);

и затем вызвать в моей функции это выглядит так:

    const handleHover = ({ target }) => {
        if (node?.current.contains(target)) {
        ....
        }
    }

Но это выдает ошибку: «Невозможно вызвать выражение, тип которого не имеет подписи вызова. Тип« MutableRefObject »не имеет совместимых подписей вызова». на уровне определения, а затем «Ожидаемое выражение» в моей функции.

Я уверен, что ответ очевиден, и я только смотрел на это слишком долго, но я в тупик в текущий момент, так Любая обратная связь очень ценится.

Мой текущий компонент для полной справки:

import React, { useEffect, useRef, useState } from 'react';
import './tooltip-style.scss'
import cx from 'classnames';


type Props = {
    title: string;
    position: string;
    children: React.ReactNode;
};

const Tooltip = (props: Props) => {
    const { title, position, children } = props;

    const node = useRef();
    const [isVisible, setState] = useState(false);

    const handleHover = ({ target }) => {
        if (node.current.contains(target)) {
            // hover over
            return;
        }
        // hover out
        setState(false);
    };

    useEffect(() => {
        document.addEventListener('mouseover', handleHover);

        return () => {
            document.removeEventListener('mouseout', handleHover);
        };
    }, []);

    return (
        <div className={'.container'}
            data-testid="tooltip"
            ref={node}
            onMouseEnter={() => setState(!isVisible)}
        >
            <div data-testid="tooltip-placeholder">{children}</div>
            {isVisible && (
                <div
                    className={cx('.tooltipContent', [position])}
                    data-testid="tooltip-content"
                >
                    <span className={'.arrow'}></span>
                    {title}
                </div>
            )}
        </div>
    );
};


export default Tooltip;