How to use the @webiny/app/components.withUi function in @webiny/app

// @flow
import React from "react";
import { compose, withProps, withHandlers, setDisplayName } from "recompose";
import { Snackbar } from "@webiny/ui/Snackbar";
import _ from "lodash";
import { withUi } from "@webiny/app/components";

const SnackbarMain = ({ message, options, hideSnackbar }) => {
    return ;
};

export default compose(
    setDisplayName("SnackbarMain"),
    withUi(),
    withProps(props => ({
        message: _.get(props.ui, "snackbar.message"),
        options: _.get(props.ui, "snackbar.options", {})
    })),
    withHandlers({
        hideSnackbar: props => () => {
            props.ui.setState(ui => ({ ...ui, snackbar: null }));
        }
    })
)(SnackbarMain);

return (BaseComponent: React.ComponentType<*>) => {
        return compose(
            withUi(),
            withHandlers({
                showSnackbar: props => (message, options) => {
                    props.ui.setState(ui => {
                        return { ...ui, snackbar: { message, options } };
                    });
                },
                hideSnackbar: props => () => {
                    props.ui.setState(ui => {
                        return { ...ui, snackbar: null };
                    });
                }
            })
        )(BaseComponent);
    };
};

return (BaseComponent: React.ComponentType<*>) => {
        return compose(
            withUi(),
            withHandlers({
                showDialog: props => (message, options) => {
                    props.ui.setState(ui => {
                        return { ...ui, dialog: { message, options } };
                    });
                }
            })
        )(BaseComponent);
    };
};