hook that provides a jsx component

useSupportSidebar.js

const useSupportSidebar = () => {
    const classes = useStyles();

    const [isSidebarOpen, setSidebarOpen] = useState(false);

    const toggleSidebar = () => setSidebarOpen(!isSidebarOpen);
    const closeSidebar = () => setSidebarOpen(false);

    const drawerStateClass = isSidebarOpen ? classes.drawerOpen : classes.drawerClose;

    const Sidebar = (
        <Drawer
            variant="temporary"
            anchor="right"
            onClose={closeSidebar}
            className={`${classes.drawer} ${drawerStateClass}`}
            classes={{
                paper: `${drawerStateClass} ${classes.drawerPaper}`,
            }}
            open={isSidebarOpen} >

            <div>
                <IconButton onClick={closeSidebar}>
                    <i className="fa fa-close" />
                </IconButton>
            </div>
            <SupportRequest />
        </Drawer>
    );

    return [Sidebar, toggleSidebar];
};

export default useSupportSidebar;

export const withSidebar = Component => props => {
    const [Sidebar, toggleSidebar] = useSupportSidebar();
    return (
        <>
            <Component {...props} toggleSidebar={toggleSidebar} />
            <Sidebar />
        </>
    );
};