Wanting to understand the best practices of hooks. Is this a bad pattern for a custom hook?

customHook.js

import { useState, useEffect, useRef } from 'react';

// thinking this could be a common 'toggle' hook to abstract
// the keybindings for escape, blur and such
const useToggle = (isOpen, classes) => {
    const [open, setOpen] = useState(isOpen);
    const sectionEl = useRef(null);
    const classesString = (open) ?
        `${classes.messageToggle} ${classes.messageToggleOpen}` :
        `${classes.messageToggle}`;

    function handleKeyUp(event) {
        if (event.key === 'Escape') {
            setOpen(false);
        }
    }

    function handleBlur(event) {
        if (!(event.relatedTarget && sectionEl.contains(event.relatedTarget))) {
            setOpen(false);
        }
    }

    function toggleOpen() {
        setOpen(!open);
    }

    useEffect(() => {
        document.addEventListener('keydown', handleKeyUp);

        return () => {
            document.removeEventListener('keydown', handleKeyUp);
        };
    }, []);

    return {
        classesString,
        open,
        handleBlur,
        handleKeyUp,
        toggleOpen,
        sectionEl,
    };
};

export default useToggle;

example-consumer.js

const DrawerBase = ({ children, classes }) => {
    const {
        classesString,
        open,
        handleBlur,
        handleKeyUp,
        sectionEl,
        toggleOpen,
    } = useDrawerToggle(false, classes);

    return (
        <section
            onBlur={handleBlur}
            ref={sectionEl}
        >
            <button
                onClick={toggleOpen}
                onKeyUp={handleKeyUp}
                className={`icon-chat-bubble unread ${classesString}`}
            />
            <Drawer open={open} className={classes.drawer} anchorTo="right">
                {children}
            </Drawer>
        </section>
    );
};