How to use the @dhis2/d2-ui-core.withStateFrom function in @dhis2/d2-ui-core

return (
         setHovering(true)} onMouseLeave={() => setHovering(false)}>
            <div style="{{">
                {searchResultBoxContent}
            </div>
            <div style="{styles.moreAppsButtonWrap}">
                {moreAppsButton}
            </div>
        
    );
}

// Connect the store to the SearchResults component
// TODO: This means we can only have one search results at all times (Perhaps make this more dynamic?)
const SearchResultsWithState = withStateFrom(searchStore$, addD2Context(SearchResults));

export default SearchResultsWithState;

this.setState({ hasFocus: false });
        hideWhenNotHovering();
    }

    onKeyUp(event) {
        handleKeyPress(event, Math.floor(event.currentTarget.clientWidth / MENU_ITEM_WIDTH));
    }
}

SearchField.contextTypes = {
    d2: PropTypes.object.isRequired,
};

const StyledSearchField = withStyles(searchFieldStyles)(SearchField);

export default withStateFrom(searchStore$, StyledSearchField);

>

            

        
    );
}
EditLegendItem.contextTypes = {
    d2: PropTypes.object,
};

export default withStateFrom(legendItemStore$, EditLegendItem);

HeaderBar.childContextTypes = {
    d2: PropTypes.object,
};

HeaderBar.propTypes = {
    notifications: PropTypes.object,
    profileItems: PropTypes.array,
    noLoadingIndicator: PropTypes.bool,
    d2: PropTypes.object.isRequired,
};

HeaderBar.defaultProps = {
    notifications: {},
};

export default withStateFrom(headerBarStore$, HeaderBar);