How to use the @shopgate/engage/core.withForwardedRef function in @shopgate/engage

loading: PropTypes.bool.isRequired,
  visible: PropTypes.bool.isRequired,
  forwardedRef: PropTypes.shape(),
  onReset: PropTypes.func,
};

AddMoreButton.defaultProps = {
  onReset: () => {},
  forwardedRef: null,
};

AddMoreButton.contextTypes = {
  i18n: PropTypes.func,
};

export default withForwardedRef(AddMoreButton);

type="button"
        aria-hidden={ariaHidden}
        aria-label={ariaLabel}
        tabIndex="0"
      >
        <div>
          {Icon &amp;&amp; }
        </div>
        
        {Badge &amp;&amp; }
      
    );
  }
}

export default withForwardedRef(NavDrawerItem);

<div style="{tickInlineStyle}">
          
        </div>
        <div style="{cartInlineStyle}">
          
        </div>
      
    );
  }
}

export default withForwardedRef(AddToCartButton);

/**
   * @returns {JSX}
   */
  render() {
    const { item, rightComponent: Right, selected } = this.props;

    return (
      <button type="button" role="option" aria-selected="{selected}" data-test-id="{item.label}">
        {item.label}
        {item.selectable &amp;&amp; }
      </button>
    );
  }
}

export default withForwardedRef(SheetItem);