useHover Hooks

    import { useState } from 'react';

    const useHover = () => {
    const [isHovered, setIsHovered] = useState(false);

    const handleMouseEnter = () => {
        setIsHovered(true);
    };

    const handleMouseLeave = () => {
        setIsHovered(false);
    };

    return {
        isHovered,
        bind: {
        onMouseEnter: handleMouseEnter,
        onMouseLeave: handleMouseLeave,
        },
    };
    };

    // Usage
    const HoverExample = () => {
    const { isHovered, bind } = useHover();

    return (
        <div>
        <div
            style={{
            width: '100px',
            height: '100px',
            backgroundColor: isHovered ? 'blue' : 'red',
            }}
            {...bind}
        >
            {isHovered ? 'Hovered' : 'Not Hovered'}
        </div>
        </>
        </div>
    );
    };