How to use the @ui5/webcomponents-react/lib/ButtonDesign.ButtonDesign.Emphasized function in @ui5/webcomponents-react

const renderHeaderContent = () => (
  <div style="{{">
    www.myurl.com
    
    
    
  </div>
);

render(
  
    
          Primary Action
        ,
        <button>Action</button>
      ]}
      image={SampleImage}
      renderHeaderContent={renderHeaderContent}
      imageShapeCircle={false}
      showHideHeaderButton={true}
      style={{ height: '700px' }}
    &gt;
      
        <div style="{{">My Content 1</div>
      
      
        <div style="{{">Test2</div>

render() {
    const { emphasize } = this.props;

    return (
      <button style="{{">
        {this.props.action}
      </button>
    );
  }
}

{actionsToRender.map((action, index) => (
            <button data-action="{action}" style="{{">
              {action}
            </button>
          ))}

export const renderDemo = () => {
  return (
    <div style="{{">
      
            Primary Action
          ,
          <button>
            Action
          </button>
        ]}
        image={SampleImage}
        renderHeaderContent={renderHeaderContent}
        mode={select('mode', ObjectPageMode, ObjectPageMode.Default)}
        imageShapeCircle={boolean('imageShapeCircle', false)}
        showHideHeaderButton={boolean('showHideHeaderButton', true)}
        selectedSectionId={text('selectedSectionId', '1')}
        selectedSubSectionId={text('selectedSubSectionId', undefined)}
        onSelectedSectionChanged={action('onSelectedSectionChanged')}
        noHeader={boolean('noHeader', false)}
        alwaysShowContentHeader={boolean('alwaysShowContentHeader', false)}</div>

const footerButtons = useMemo(() => {
      return (
        <button>
          Cancel
        </button>
      );
    }, [classes.footer]);