Typescript Реагирует на пользовательский крючок ссылка на элемент div

ИЗМЕНИТЬ: Я настроил кодовое поле: https://codesandbox.io/s/magical-poitras-yogur?file=/src/App.tsx

Я пытаюсь создать пользовательский хук для элемента div в react, чтобы добавить прослушиватели событий.

Я нашел это "общее" решение:

function useMyCustomHook<T extends HTMLElement>{
    const myRef = useRef<T>(null)

    // do something with the ref, e.g. adding event listeners

    return {ref: myRef}
}

function MyComponent(){
    const {ref: myElementRef} = useMyCustomHook<HTMLDivElement>()

    return <div ref={myElementRef}>A Div</div>
}

от: Не удается назначить RefObject<HTMLDivElement> для RefObject<HTMLDivElement><HTMLElement> экземпляр<HTMLElement>

Который я попытался реализовать в своем коде ниже. Я играл в течение нескольких часов и, наконец, свел все к одной ошибке, но я не знаю, как ее решить. Ошибка в моем useHover выражение функции на первом =. ошибка заключается в: '(' expected.ts(1005)

теперь мой код:

const Hooks = (props: any) => {
    const [hoverRef, hovered] = useHover();
    const style = {
        backgroundColor: hovered ? "red" : "",
    };

    return (
        <div ref={hoverRef} style={style}>
            <h1>Hooks!</h1>
        </div>
    );
};

                                          
const useHover:<HTMLDivElement extends HTMLElement> = () => {
                                      // ERROR HERE ^ the first equal sign. '(' expected.ts(1005)
    const [value, setValue] = useState(false);
    const ref = useRef<HTMLDivElement>(null);

    const handleMouseOver = () => setValue(true);

    useEffect(() => {
        const node = ref.current;
        if (node) {
            node.addEventListener("mouseover", handleMouseOver);

            return () => {
                node.removeEventListener("mouseover", handleMouseOver);
            }
        }
    }, []);

    return [ref, value];
};

Любая помощь будет признательна!