自定义 useHover

我们在 React 中经常会根据当前鼠标的 Hover 状态来改别一些渲染效果, 在 CSS 中我们可以用 :hover, 不过在更加复杂的情况下, 会希望在代码中进行状态控制, 现在希望你实现 useHover 这个自定义 Hook, 使用的方式是: 

function App() {
  const [ref, isHovered] = useHover()
  retrun <div ref={ref}>{isHovered ? "hovered" : "not hovered"}</div>            
}

请在以下完成函数: 

import { React, useEffect, useRef, useState } from "react";
export default function useHover() {
    const [isHover, setIsHover] = useState(false);
    const ref = useRef()
    useEffect(() => {
        ref.current?.addEventListener("mouseenter", () => {
            setIsHover(true)
        })
        ref.current?.addEventListener('mouseleave', () => {
            setIsHover(false)
        })
    }, [])
　　return [ref, isHover]
}