How to use the @webiny/app/hooks/useUi.useUi function in @webiny/app

const useConfirmationDialog = ({ title, message }) => {
    const ui = useUi();

    return {
        showConfirmation: (onAccept, onCancel) => {
            ui.setState(ui => {
                return {
                    ...ui,
                    dialog: {
                        message,
                        options: {
                            title,
                            actions: {
                                accept: {
                                    label: t`Confirm`,
                                    onClick: onAccept
                                },
                                cancel: {

const Hamburger = () => {
    const ui = useUi();

    const toggleMenu = useCallback(() => {
        ui.setState(ui => set(ui, "appsMenu.show", !(get(ui, "appsMenu.show") || false)));
    }, [ui]);

    return (
        
            } onClick={toggleMenu} />
            {ReactDOM.createPortal(, getElement())}
        
    );
};

const useDialog = () => {
    const ui = useUi();
    return {
        showDialog: (message, options) => {
            ui.setState(ui => {
                return { ...ui, dialog: { message, options } };
            });
        }
    };
};

const DialogMain = () => {
    const ui = useUi();
    const message = get(ui, "dialog.message");
    const options = get(ui, "dialog.options", {});

    const hideDialog = useCallback(() => {
        ui.setState(ui => ({ ...ui, dialog: null }));
    }, [ui]);

    return (
        <dialog>
            <dialog open="{!!message}">
                {options.title &amp;&amp; {options.title}}
                {message}
                
                    OK
                
            </dialog></dialog>